jQuery Validation动态表单无法提交的解决方法

在使用jQuery Validation Plugin对表单进行验证，如果使用Js动态的往form里添加input或textarea表单项时，发现无法提交表单，新添加的表单项无法通过验证，脚本报错。

使用的表单验证插件版本是：jQuery Validation Plugin 1.11.1。

解决方法是如果表单内容有改变，则重新设置一下验证规则即可。举例如下：

代码如下

复制代码

$("#formid").change(function(){
    var $form = $("#"+formId);
    var validSetting = $form.validate({
        errorElement: 'span',
        errorClass: 'help-inline',
        focusInvalid: false,
        ignore:":hidden",
        rules: {
            email: {
                required: true,
                email: true
            }
        },
        errorPlacement: function (error, element) { // render error placement for each input type
            error.insertAfter(element); // for other inputs, just perform default behavoir
        },
        invalidHandler: function (event, validator) { //display error alert on form submit

        },
        highlight: function (element) {
            $(element).closest('.help-inline').removeClass('ok'); // display OK icon
            $(element).closest('.control-group').removeClass('success').addClass('error'); // set error class to the control group
        },
        unhighlight: function (element) {
            $(element).closest('.control-group').removeClass('error'); // set error class to the control group
        },
        success: function (label) {
            label.addClass('valid').addClass('help-inline ok').closest('.control-group').removeClass('error').addClass('success');
        }
    });
    if (!$form.valid()) {
        return false;
    }
    $form.change(function(){ //当表单元素有改变时重置验证规则
        validSetting.rules = rules;
    });

时间： 2024-08-02 15:10:43

jQuery Validation动态表单无法提交的解决方法

jQuery Validation动态表单无法提交的解决方法的相关文章

jQuery UI Dialog 表单无法提交的解决方法

jQuery实现动态表单验证时文本框抖动效果完整实例_jquery

JavaScript动态创建form表单并提交的实现方法_javascript技巧

Jquery插件easyUi表单验证提交

ThinkPHP下表单令牌错误与解决方法分析

jquery mobile动态添加元素之后不能正确渲染解决方法说明

防止用户将表单重复提交四种方法(实例教程)

php 防止表单重复提交几种方法

Java表单重复提交的避免方法_java