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

Question

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

我已尝试过以下操作，但尝试在第一次点击时提交表单，然后检查第二次点击的规则。

$("#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({
            ///
        });
    }
});

  

它尝试在第一次点击时提交表单，然后检查第二次点击的规则。

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

  

我事先并不知道输入的名称，我需要在加载表单之后和用户提交表单之前添加规则。

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

2. 创建表单输入后立即调用.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
    });
});