一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

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

时间:2013-10-30 编辑:简简单单 来源:一聚教程网

在使用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;
    });

热门栏目