为什么 jQuery 验证会向有效字段添加错误？

Question

我正在处理一个包含多个字段的表单，当出现 "onblur" 时 jquery 验证正在将错误 [=40=] 添加到有效字段。

这是我的表格html

<div id="diaAddCustomer" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog" style="background-color: #fff; width: 650px;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&nbsp;</span></button>
        <h4 class="modal-title">Add New Customer</h4>
    </div>
    <form class="form-horizontal" id="frmAddCustomer" name="frmAddCustomer" novalidate>
        <input type="hidden" id="addCustomerPersonID" name="addCustomerPersonID" value="">
        <div class="modal-body">
            <div class="form-group">
                <div class="col-md-3">
                    <label for="addCustomerName">Name:</label>
                </div>
                <div class="col-md-9">
                    <input type="text" class="form-control input-sm" id="addCustomerName" name="addCustomerName" value="">
                </div>
            </div>
            <h4>Billing Address</h4>
            <div class="form-group">
                <div class="col-md-3">
                    <label for="addCustomerAdd1">Address:</label>
                </div>
                <div class="col-md-9">
                    <input type="text" class="form-control input-sm" id="addCustomerAdd1" name="addCustomerAdd1" value="">
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-3">
                    <label for="addCustomerAdd2"></label>
                </div>
                <div class="col-md-9">
                    <input type="text" class="form-control input-sm" id="addCustomerAdd2" name="addCustomerAdd2" value="">
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-3">
                    <label for="addCustomerCity">City:</label>
                </div>
                <div class="col-md-9">
                    <input type="text" class="form-control input-sm" id="addCustomerCity" name="addCustomerCity" value="">
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-3">
                    <label for="addCustomerState">State:</label>
                </div>
                <div class="col-md-4">
                    <input type="text" class="form-control input-sm" id="addCustomerState" name="addCustomerState" value="">
                </div>
                <div class="col-md-2">
                    <label for="addCustomerZip">Zip:</label>
                </div>
                <div class="col-md-3">
                    <input type="text" class="form-control input-sm" id="addCustomerZip" name="addCustomerZip" value="" onkeyup="valNumber($(this))">
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-3">
                    <label for="addCustomerPhone">Phone:</label>
                </div>
                <div class="col-md-4">
                    <input type="text" class="form-control input-sm" id="addCustomerPhone" name="addCustomerPhone" onkeyup="valNumber($(this))" onblur="formatPhone($(this))" onfocus="removePhoneFormat($(this))" value="">
                </div>
                <div class="col-md-2">
                    <label for="addCustomerPhoneType">Type:</label>
                </div>
                <div class="col-md-3">
                    <select class="form-control input-sm" id="addCustomerPhonetype" name="addCustomerPhoneType">
                        <option value=""> Please Select...</option>
                        <option value="cell"> Cell</option>
                        <option value="fax"> Fax</option>
                        <option value="phone"> Phone</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-3">
                    <label for="addCustomerEmail">Email:</label>
                </div>
                <div class="col-md-9">
                    <input type="text" class="form-control input-sm" id="addCustomerEmail" name="addCustomerEmail" value="">
                </div>
            </div>
            <h4>Shipping Address <span style="font-size: 10pt;"><input type="checkbox" id="ckbSameShip" ng-click="setShipAddress()"> Same As Billing</span></h4>
            <div class="form-group">
                <div class="col-md-3">
                    <label for="addCustomerShipAdd1">Address:</label>
                </div>
                <div class="col-md-9">
                    <input type="text" class="form-control input-sm" id="addCustomerShipAdd1" name="addCustomerShipAdd1" value="">
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-3">
                    <label for="addCustomerShipAdd2"></label>
                </div>
                <div class="col-md-9">
                    <input type="text" class="form-control input-sm" id="addCustomerShipAdd2" name="addCustomerShipAdd2" value="">
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-3">
                    <label for="addCustomerShipCity">City:</label>
                </div>
                <div class="col-md-9">
                    <input type="text" class="form-control input-sm" id="addCustomerShipCity" name="addCustomerShipCity" value="">
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-3">
                    <label for="addCustomerShipState">State:</label>
                </div>
                <div class="col-md-4">
                    <input type="text" class="form-control input-sm" id="addCustomerShipState" name="addCustomerShipState" value="">
                </div>
                <div class="col-md-2">
                    <label for="addCustomerShipZip">Zip:</label>
                </div>
                <div class="col-md-3">
                    <input type="text" class="form-control input-sm" id="addCustomerShipZip" name="addCustomerShipZip" value="" onkeyup="valNumber($(this))">
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-3">
                    <label for="addCustomerShipPhone">Phone:</label>
                </div>
                <div class="col-md-4">
                    <input type="text" class="form-control input-sm" id="addCustomerShipPhone" name="addCustomerShipPhone" onkeyup="valNumber($(this))" onblur="formatPhone($(this))" onfocus="removePhoneFormat($(this))" value="">
                </div>
                <div class="col-md-2">
                    <label for="addCustomerShipPhoneType">Type:</label>
                </div>
                <div class="col-md-3">
                    <select class="form-control input-sm" id="addCustomerShipPhonetype" name="addCustomerShipPhoneType">
                        <option value=""> Please Select...</option>
                        <option value="cell"> Cell</option>
                        <option value="fax"> Fax</option>
                        <option value="phone"> Phone</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-plus"></i> Add Customer</button>
            <button type="button" class="btn btn-sm btn-default" data-dismiss="modal"><i class="glyphicon glyphicon-ban-circle"></i> Cancel</button>
        </div>
    </form>
</div>

这是我的验证脚本

$scope.openAddCustomerWdw = function(pID){
        $("#diaAddCustomer").on("shown.bs.modal", function(){
            $("#addCustomerPersonID").val(pID);
            $("#addCustomerName").val("");
            $("#addCustomerAdd1").val("");
            $("#addCustomerAdd2").val("");
            $("#addCustomerCity").val("");
            $("#addCustomerState").val("");
            $("#addCustomerZip").val("");
            $("#addCustomerPhone").val("");
            $("#addCustomerPhoneType").val("");
            $("#addCustomerEmail").val("");
            $("#addCustomerShipAdd1").val("");
            $("#addCustomerShipAdd2").val("");
            $("#addCustomerShipCity").val("");
            $("#addCustomerShipState").val("");
            $("#addCustomerShipZip").val("");
            $("#addCusomterShipPhone").val("");
            $("#addCustomerShipPhoneType").val("");
            $("#addCustomerName").select();
        });
        $("#diaAddCustomer").modal("show");
        $("#frmAddCustomer").validate({
            debug: true,
            rules: {
                addCustomerName: { required: true },
                addCustomerAdd1: { required: true },
                addCustomerCity: { required: true },
                addCustomerState: { required: true },
                addCustomerZip: { required: true },
                addCustomerPhone: { required: true, phoneUS: true },
                addCustomerPhoneType: { required: true },
                addCustomerEmail: { required: function(){
                    return $("#addCustomerEmail").length > 0;
                }, email: true },
                addCustomerShipAdd1: { required: true },
                addCustomerShipCity: { required: true },
                addCustomerShipZip: { required: true },
                addCustomerShipPhone: { required: true, phoneUS: true },
                addCustomerShipPhoneType: { required: true }
            },
            messages: {
                addCustomerName: { required: "Name is Required" },
                addCustomerAdd1: { required: "Address is Required" },
                addCustomerCity: { required: "City is Required" },
                addCustomerState: { required: "State is Required" },
                addCustomerZip: { required: "Zip Code is Required" },
                addCustomerPhone: { required: "Valid Phone Required", phoneUS: "Valid Phone Required" },
                addCustomerPhoneType: { required: "Phone Type Required" },
                addCustomerEmail: { required: "Valid Email Required", email: "Valid Email Required" },
                addCustomerShipAdd1: { required: "Address is Required" },
                addCustomerShipCity: { required: "City is Required" },
                addCustomerShipState: { required: "State is Required" },
                addCustomerShipZip: { required: "Zip Code is Required" },
                addCustomerShipPhone: { required: "Valid Phone Required", phoneUS: "Valid Phone Required" },
                addCustomerShipPhoneType: { required: "Phone Type is Required" }
            },
            success: function(data){
                if(data == "success"){

                } else {

                }
            }
        })
    }

当表单打开时，html 如上所示，但未应用 jquery label/error class。在除第二个地址字段之外的任何字段中输入文本时，在发生模糊时应用 jquery label/error class。它是一个空标签，但会导致表单字段下拉以获取附加标签。

这是打开表单时的样子

这是输入数据后的表格

我意识到 jquery validate 对模糊事件进行表单验证，os 我理解的那部分工作正常。问题是有效字段中附加的错误元素以及导致表单高度扩展的结果，并且没有向正在发生的事情提供任何信息。

我试过使用 debug: true，查看控制台 window 并尝试以不同方式跟踪此错误，不幸的是，似乎没有任何额外的错误信息可供我使用。

非常感谢帮助我指出代码错误的正确方向。

Answer 1

您可以尝试添加 onfocusout: false 在验证器中。喜欢

$("#frmAddCustomer").validate({
        debug: true,
        onfocusout: false,
        ...

Answer 2

Why does jQuery Validate Adds Error to a Valid Field?

没有。该插件动态创建 empty label 元素以包含任何未来的验证错误消息。然后当验证错误发生时，label 元素被填充并根据需要切换。

The problem is the appended error elements in a valid field and the result causing the form to expand in height and no information being provided to what is happening.

debug 选项仅用于指出 .validate() 方法中各种可能的语法错误。但是，您的问题是由您的 HTML and/or CSS 引起的，因此，此插件无法知道该问题。

正如您在该演示中看到的那样，您的 jQuery 验证代码与您的问题无关，因为布局完全不受 hidden/empty label 元素的影响：

http://jsfiddle.net/d0n5L8qj/

在此处发布的关于 jQuery Validate 的数千个问题中，我从未见过有人报告过这种情况。通常，空元素或隐藏元素在布局中会占用零 space。由于某些完全未知的原因（您没有显示足够的代码）您的特定布局受到这些空的隐藏元素的影响。您需要检查您的实时 DOM and/or 您的 CSS 以找出这些空 label 元素占用 space 的根本原因。否则，您必须 create a demo 重现问题 以便我们检查 DOM and/or CSS.

编辑:

来自 :

I don't know how or why making this correction in my code changed the validation fields to no longer take up space as shown in my original post, but making this revision did stop this problem from happening.

我不应该认为这是故意的...

success: function(data){
    if(data == "success"){

    } else {

    }
}

我以为这里有更多代码，OP 只是将其删除以供发布。但是，我不应该做出这个假设，因为 success 选项显示的是空的 label 元素……它们是空的，因为 success 函数没有用任何东西填充它们。

见documentation for explanation of how success caused the issue:

If specified, the error label is displayed to show a valid element. If a String is given, it is added as a class to the label. If a Function is given, it is called with the label (as a jQuery object) and the validated input (as a DOM element). The label can be used to add a text like "ok!".

就 OP 的回答而言，他只是将单词 success 更改为 submitHandler...

submitHandler: function(data){
    if(data == "success"){

    } else {

    }
}

这解决了问题只是因为他删除了 success 选项。更改为 submitHandler 似乎完全没有必要，因为现在 submitHandler 被看起来像胡说八道的代码覆盖了。

默认情况下，插件将提交到表单的 action 属性 URL。您可以选择使用 submitHandler 覆盖例如通过 ajax 提交。否则 data 参数将代表 form 对象并且条件没有意义，因为 data 永远不会等于 "success"...此外，如果它不明显，则没有指向一个空的条件语句。

submitHandler: function(form){
    form.submit();  // <-default
}

否则...

submitHandler: function(form){
    // ajax code
    return false;
}

有关详细信息，请参阅 this answer。

编辑 2:

是的，我知道 submitHandler 的论点可以用任意词来表示。但是，此函数的唯一参数将始终表示 form 对象，即使您将其重命名为 data。

请看下面的演示。确保表单填写正确，点击提交，然后查看控制台的日志...

http://jsfiddle.net/8rhmfwtL/

Answer 3

今天晚上我偶然发现了解决方案，尽管我无法完全解释为什么会导致上述问题。问题出在验证码上。如上 posted

$("#frmAddCustomer").validate({
        debug: true,
        rules: {
            addCustomerName: { required: true },
            addCustomerAdd1: { required: true },
            addCustomerCity: { required: true },
            addCustomerState: { required: true },
            addCustomerZip: { required: true },
            addCustomerPhone: { required: true, phoneUS: true },
            addCustomerPhoneType: { required: true },
            addCustomerEmail: { required: function(){
                return $("#addCustomerEmail").length > 0;
            }, email: true },
            addCustomerShipAdd1: { required: true },
            addCustomerShipCity: { required: true },
            addCustomerShipZip: { required: true },
            addCustomerShipPhone: { required: true, phoneUS: true },
            addCustomerShipPhoneType: { required: true }
        },
        messages: {
            addCustomerName: { required: "Name is Required" },
            addCustomerAdd1: { required: "Address is Required" },
            addCustomerCity: { required: "City is Required" },
            addCustomerState: { required: "State is Required" },
            addCustomerZip: { required: "Zip Code is Required" },
            addCustomerPhone: { required: "Valid Phone Required", phoneUS: "Valid Phone Required" },
            addCustomerPhoneType: { required: "Phone Type Required" },
            addCustomerEmail: { required: "Valid Email Required", email: "Valid Email Required" },
            addCustomerShipAdd1: { required: "Address is Required" },
            addCustomerShipCity: { required: "City is Required" },
            addCustomerShipState: { required: "State is Required" },
            addCustomerShipZip: { required: "Zip Code is Required" },
            addCustomerShipPhone: { required: "Valid Phone Required", phoneUS: "Valid Phone Required" },
            addCustomerShipPhoneType: { required: "Phone Type is Required" }
        },
        **success: function(data){
            if(data == "success"){
            } else {
            }
        }**
    })

加粗的 "success: function(data)" 应该是

submitHandler: function(data){
   if(data == "success"){
   } else {
   }
}

我不知道如何或为什么在我的代码中进行此更正将验证字段更改为不再占用 space，如我的原始 post 所示，但进行此修订确实停止了这个问题不会发生。

经过数小时的搜索和@Sparky 的评论，我无法找到这个问题，在成千上万的 JQuery 验证问题中他们从未见过这种情况 post。我也无法找到逻辑推理 how/why 这会导致问题 post 在这里。

为什么 jQuery 验证会向有效字段添加错误？

Why does jQuery Validate Adds Error to a Valid Field?

forms

jquery

jquery-validate