jquery - 为什么 jQuery 验证在发送表单后运行？

Question

我正在尝试使用 jQuery validate 插件验证此表单，但是一旦发现错误它就不会停止 javascript 代码，因此将表单发送到数据库，然后才显示错误。我能做些什么来正确链接这些事件？

$("#salvar-cur").live("click", function () {
    var validator = $("#frm_curriculo").validate({
        rules: {
            cur_nome: {
                required: true
            }
            //other options
        },
        messages: {
            cur_nome: {
                required: "*"
            }
            //other options
        }
    });
    if (validator.numberOfInvalids() == 0) {
        alert("Success!")
        var params = $("#frm_curriculo").serialize();
        $.ajax({
            type: "POST",
            url: "controller/ctrl_curriculo.php",
            data: "acao=inserir&" + params,
            dataType: "html",
            contentType: "application/x-www-form-urlencoded",
            success: function () {
                $("#frm_curriculo")[0].reset();
            }
        });
    }
});

Answer 1

首先，您在每次点击时重新添加验证器。您真的应该在事件处理程序之外执行此操作。

此外，不是检查，而是validator.numberOfInvalids()尝试检查$("#frm_curriculo").valid()，这将验证表单并返回trueor false。

另一个注意事项，如果#salvar-cur是一个提交按钮，你会想要阻止它的默认操作。

$(function(){
    $("#frm_curriculo").validate({
        rules: {
            cur_nome: {
                required: true
            }
            //other options
        },
        messages: {
            cur_nome: {
                required: "*"
            }
            //other options
        }
    });
});

$("#salvar-cur").live("click", function (e) {
    e.preventDefault();
    if ($("#frm_curriculo").valid()) {
        alert("Success!")
        var params = $("#frm_curriculo").serialize();
        $.ajax({
            type: "POST",
            url: "controller/ctrl_curriculo.php",
            data: "acao=inserir&" + params,
            dataType: "html",
            contentType: "application/x-www-form-urlencoded",
            success: function () {
                $("#frm_curriculo")[0].reset();
            }
        });
    }
});