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

更新时间:2018-10-19    来源:jquery    手机版     字体:

【www.bbyears.com--jquery】

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

本文来源:http://www.bbyears.com/wangyezhizuo/45168.html

热门标签

更多>>

本类排行