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

Question

我有一个带有文本框的表单，该表单仅对数字进行了验证。错误显示在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();
        }
    };

Answer 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，它是专为创建自定义错误摘要而设计的。