Jquery 一旦生成表单，验证就会为每个输入动态添加规则

Question

我 php 动态创建了一个表单，并且正在加载 Ajax。然后我使用 jQuery 验证来检查表单，但由于我事先不知道输入的名称，我需要在加载表单之后和用户提交表单之前添加规则。

我尝试了以下方法，但它尝试在第一次点击时提交表单，然后在第二次点击时检查规则。

$("#readingForm").validate({
        invalidHandler: function () { //display error alert on form submit              
            EMPGlobal.showAlert('', '', 'danger', 'There was an error' , '', '', '', 'warning');
        },
        submitHandler: function (){     
            $('#readingForm .meter-val').each(function(){
                $(this).rules( "add", {
                    required: true,
                    number: true,
                    minlength: 2
                });
            });
            $('#readingForm .insert-val').each(function(){
                $(this).rules( "add", {
                    required: true,
                    minlength: 10,
                    date: true
                });
            });
            $.ajax({
                url: 'include/pages/readings.php?',
                data: $(this).serialize(),
                type: 'POST',
                success: function (data) {
                    EMPGlobal.showAlert('', '', 'success', message, '', '', '', 'success', jqXHR.status);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    returnMes = $.parseJSON(jqXHR.responseText);
                    message = 'A ' + jqXHR.status + ' ' + errorThrown + ' error occured. <br /> <i>Message Details: ' + returnMes + '</i>';
                    EMPGlobal.showAlert('', '', 'danger', message, '', '', '', 'warning', jqXHR.status);
                },
            });
        }
    });

非常感谢对此问题的帮助，我已经在这个问题上转了几个小时了。

Answer 1

您的代码：

$("#readingForm").validate({
    invalidHandler: function () { //display error alert on form submit              
        EMPGlobal.showAlert('', '', 'danger', 'There was an error' , '', '', '', 'warning');
    },
    submitHandler: function (){     
        $('#readingForm .meter-val').each(function(){
            $(this).rules( "add", {
               ///
            });
        });
        $('#readingForm .insert-val').each(function(){
            $(this).rules( "add", {
                ///
            });
        });
        $.ajax({
            ///
        });
    }
});

it attempts to submit the form on the first click, and then check the rules on the second.

虽然您应该不将.rules()方法放在.validate()方法内部的任何位置，但在[=14=内部肯定没有任何意义].由于 submitHandler 仅在表单有效时触发，adding/evaluating 任何新规则都为时已晚...这就是您必须单击两次的原因。

I do not know the names of the inputs in advance, I need to add the rules after the form is loaded and before a user submits the form.

在创建表单后立即调用 .validate()。这就是初始化插件的原因。如果页面加载时表单存在，请在 DOM 就绪处理程序中 执行一次 。否则，在表格 loaded/created.

一次

在创建表单输入后立即调用 .rules() 方法。在 .validate() 方法的之外进行。如果输入元素与表单同时创建，只需调用 .rules() 方法在您调用 .validate().

// Call .validate() ONCE, after form is created.

$("#readingForm").validate({
    invalidHandler: function () { //display error alert on form submit              
        EMPGlobal.showAlert('', '', 'danger', 'There was an error' , '', '', '', 'warning');
    },
    submitHandler: function (){     
        $.ajax({
            url: 'include/pages/readings.php?',
            data: $(this).serialize(),
            type: 'POST',
            success: function (data) {
                EMPGlobal.showAlert('', '', 'success', message, '', '', '', 'success', jqXHR.status);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                returnMes = $.parseJSON(jqXHR.responseText);
                message = 'A ' + jqXHR.status + ' ' + errorThrown + ' error occured. <br /> <i>Message Details: ' + returnMes + '</i>';
                EMPGlobal.showAlert('', '', 'danger', message, '', '', '', 'warning', jqXHR.status);
            },
        });
    }
});

// Call .rules() ONCE, after relevant elements are created AND after .validate().

$('#readingForm .meter-val').each(function(){
    $(this).rules( "add", {
        required: true,
        number: true,
        minlength: 2
    });
});
$('#readingForm .insert-val').each(function(){
    $(this).rules( "add", {
        required: true,
        minlength: 10,
        date: true
    });
});

Jquery 一旦生成表单，验证就会为每个输入动态添加规则

Jquery Validation dynamically add rules for each input once form generated

forms

ajax

jquery

jquery-validate