使用 jQuery Validation 验证文本框中的数字答案

【问题标题】：Validating for digits in a textbox with jQuery Validation使用 jQuery Validation 验证文本框中的数字
【发布时间】：2015-07-20 20:09:21
【问题描述】：

我有一个带有仅对数字进行验证的文本框的表单。错误显示在 jQueryUI 模式窗口中。但是，当在文本框中输入非数字时，我会多次收到相同的错误消息。我输入的非数字值越多，我得到的重复项就越多。任何建议将不胜感激。

这是初始验证

这是部分修复的验证

这是我输入非数字值时的验证消息。注意多个Please enter only digits 消息。

这里是代码。

var valForm = function(kit_id) {
    var form = $("#frm_" + kit_id);
    var strErrors = "<ul>";

        form.validate({
            errorClass: "error-class",
            errorElement: "div",
            errorPlacement: function(error, element) {
                console.log(error);
                strErrors += "<li>" + error[0].innerHTML + "</li>";
                $("#error_modal").html("");
                $("#error_modal").html(strErrors + "</ul>");
            }
        });

        form.find('input[name^="kit_name_"]').each(function () {
            $(this).rules("add", {
                required: true,
                messages: {
                    required: "Please enter a name."
                }
            })
        });

        form.find('input[name^="kit_desc_"]').each(function() {
            $(this).rules("add", {
                required: true,
                messages: {
                    required: "Please enter a description."
                }
            });
        });

        form.find('input[name^="kit_qty_"]').each(function() {
            $(this).rules("add", {
                required: true,
                digits: true,
                messages: {
                    required: "Please enter a quantity."
                }
            });
        });

        if (! form.valid()) {
             $("#error_modal").dialog().siblings(".ui-dialog-titlebar").remove();
            strErrors = "";
        } else {
            form.submit();
        }
    };

【问题讨论】：

每次调用errorPlacement 函数时，您都会将当前错误附加到strErrors。没有什么能消除旧的错误，所以它只会不断增长。
在 jqueryvalidation.org 网站上查看这个例子：jqueryvalidation.org/files/demo/errorcontainer-demo.html

标签： jquery jquery-validate

【解决方案1】：

您的问题是由您的errorPlacement 实现引起的...

errorPlacement: function(error, element) {
    console.log(error);
    strErrors += "<li>" + error[0].innerHTML + "</li>";
    $("#error_modal").html("");
    $("#error_modal").html(strErrors + "</ul>");
}

默认情况下，插件会根据 errorPlacement 的任何功能创建错误消息元素并将其放置在页面中。然后，每当错误更改或清除时，插件会自动更新错误消息元素的内容并切换它。您的代码不断创建新消息，插件找不到要更新或切换的错误消息元素。

换句话说，errorPlacement 仅用于为每个输入元素一次放置一条错误消息。您正试图将其完全变成其他东西。

您想在您的模态中显示错误摘要吗？如果是这样，那么您需要参考文档并使用 the showErrors option，它是为创建自定义错误摘要而设计的。

【讨论】：