我有一个表单验证器，我必须单击两次发送按钮才能将数据发送到 ajax - 为什么？

Question

所以测试场景很简单：

1) 运行我的 fiddle http://jsfiddle.net/5WMff/1364/

2) 例如第三个文本字段为现有文本字段添加一些值

3) 点击 save 按钮

4) 字段变为绿色，但没有弹出窗口。

5) 再次点击 save 按钮然后出现弹出窗口。

为什么会这样？

基本上我想验证字段并稍后将数据发送到 ajax。因为我不知道如何在 jsfiddle 上模拟发送到 ajax，所以我将简单的弹出窗口留在那里 - 你仍然可以看到奇怪的行为。我认为错误是因为我同时使用了这两个属性：

success: function (element) {
            element.addClass('valid')
                .closest('.form-group').removeClass('has-error').addClass('has-success');

        },
        submitHandler: function (form) { alert("here!");
        }

但另一方面，我不确定这是否是原因...这可能是什么问题？

Answer 1

您错误地使用了 success 回调函数。你用 highlight 做的任何事都会用 unhighlight.

得到 "undone"

The success callback option 旨在在字段通过验证时使用错误标签元素。换句话说，当字段通过验证时通常不需要错误标签，因此如果您想在验证通过时显示 "success" 消息代替错误消息，则可以使用 success 选项。

无论如何，使用 unhighlight 和 highlight 就可以了。您还错误地拼写了 has-success class.

highlight: function (element) {
    $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
unhighlight: function (element) {
    $(element).closest('.form-group').addClass('has-success').removeClass('has-error');
},

演示：http://jsfiddle.net/azxpckg5/

我有一个表单验证器，我必须单击两次发送按钮才能将数据发送到 ajax - 为什么？

I have a form validator and I have to click twice the send button to send data to ajax - why?

jquery

jquery-validate