JQuery's validator validation of dynamically added information

    JQuery.validator.addMethod ("Checkchannelname", function (value, Element) {var returnval = false;        var id = $ (' input[name= ' Channelid "]). Val (); if (Value! = ") {$.ajax ({url: ' {: U (" Tourchannel/checkchannelname ")} ', data: {n                    Ame:value, Id:id}, Async:false, type: ' POST ', success:function (data) {                    if (Data.code = = ' 10000 ') {ReturnVal = true;                    } else {$ ("Input[name= ' name ']"). Val ("");                    }}, Error:function (XHR) {$ ("Input[name= ' name ']"). Val (""); Alert (' Dynamic page has a problem!                \ n ' + xhr.responsetext);        }            });    } return returnval;    }, ' The channel Chinese name has been used, please re-enter ');        JQuery.validator.addMethod ("Iszh", function (value, Element) {var pattern =/^[\u4e00-\u9fa5]+$/; Return this.optional(Element) | |    (Pattern.test (value));    }, "can only be Chinese characters"); JQuery.validator.addMethod ("Iszhpunc", function (value, Element) {var pattern =/^[\u4e00-\u9fa5]|[ \（\）\《\》\——\；\，\。 \ "\" \<\>\!        ]$/; return this.optional (Element) | |    (Pattern.test (value));    }, "can only be Chinese characters and punctuation marks");        JQuery.validator.addMethod ("Isenglish", function (value, Element) {var pattern =/^[a-za-z]+$/; return this.optional (Element) | |    (Pattern.test (value));    }, "can only be English characters"); JQuery.validator.addMethod ("Isphone", function (value, Element) {var pattern =/^ (\d{3,4}-?)?        \d{7,9}$/g; return this.optional (Element) | |    (Pattern.test (value));    }, "Incorrect phone number format"); JQuery.validator.addMethod ("Istel", function (value, Element) {var pattern =/^ ((13[0-9]{1}) | ( 15[0-35-9]{1}) | (17[0-9]{1}) | (18[0-9]{1}))        +\D{8}) $/; return this.optional (Element) | |    (Pattern.test (value));    }, "cell phone number format is incorrect"); JQuery.validator.addMethod ("Isemail", function (value, Element) {var pattern = /^[_a-za-z0-9\-\.] [Email protected] ([\-_a-za-z0-9]+\.)        +[a-za-z0-9]{2,3}$/; return this.optional (Element) | |    (Pattern.test (value)); }, "The mailbox format is incorrect");

Add validation rules for customizations above.

    $ ("#form-channel-add"). Validate ({rules: {name: {required:true, che                Ckchannelname:true, Iszh:true, maxlength:30}, En_name: {                Required:true, maxlength:100, isenglish:true}, Web: {                Required:true, maxlength:100}, main: {required:true,                Iszhpunc:true, maxlength:100}, Order_way: {required:true, maxlength:200, Iszhpunc:true}, Contract_no: {required: True}, Channel_people: {required:true}, Channel_positi            On: {required:true}, Channel_tel: {required:true}, Channel_phone:{Required:true}}, messages: {name: {required: "This field                Cannot be empty ", MaxLength:" Max 30 characters "}, En_name: {required:" This field cannot be empty ", MaxLength: "Maximum of 100 Characters"}, Web: {required: "This field cannot be empty", maxlength            : "Maximum 100 Characters"}, main: {required: "This field cannot be empty", maxlength: "Maximum 100 characters"            }, Order_way: {required: "This field cannot be empty", maxlength: "Maximum 200 characters"}, Contract_no: {required: "the field cannot be empty"}//product_id: {required: "The product number cannot be empty!        ", Remote:jQuery.format (" The product number does not exist ")}, Onkeyup:false, Focuscleanup:true, success:" Valid ",        Errorplacement:function (Error, Element) {Error.appendto (element.parent ()); }, Unhighlight:function (element, ErrorclasS, Validclass) {}, Submithandler:function (form) {$ (form). Ajaxsubmit ({type: ' PO                    St ',//Submit by Get/post URL: ' {: U ("Addandedit")} ',//URL to submit beforesubmit:function (data) { for (var i = 0; i < data.length; i++) {if (Data[i].name.indexof ("Channel_people"                        ) >= 0) {data[i].name = "channel_people[]"; } if (Data[i].name.indexof ("channel_position") >= 0) {data[i].name = "                        Channel_position[] "; } if (Data[i].name.indexof ("Channel_tel") >= 0) {data[i].name = "Chann                        El_tel[] "; } if (Data[i].name.indexof ("Channel_phone") >= 0) {data[i].name = "cha                        Nnel_phone[] "; } if (Data[i].name.indexof ("ChannEl_email ") >= 0) {data[i].name =" channel_email[] ";                    }}, Success:function (data) {//data is stored after the commit is returned, typically JSON data                        if (Data.code = = 10000) {layer.msg (Data.data.data, {icon:1, time:5000});                            SetTimeout (function () {window.location.href=data.data.url;                            var index = Parent.layer.getFrameIndex (window.name);                        Parent.layer.close (index);                    }, 1000);                    } else {layer.msg (data.data.data, {icon:2, time:2000}); }}, Error:function () {layer.msg (' Unknown error!                ', {icon:2, time:2000});            }            });        return false; }    });

The above is the form submission, validation method.

    Add a Contact $ ("#addPeople"). Click (function () {var userindex = $ (". User-info-box"). Length;        var html = ';        html+= ' <div class= "col-xs-12 col-sm-12 user-info-box" > ";        html+= ' <div class= "line mt-10" ></div> ";        html+= ' <div class= "col-xs-12 col-sm-6 mt-10" > ";        html+= ' <div class= ' row cl ' > '; html+= ' <label class= "Form-label col-xs-4 col-sm-3" ><span class= "c-red" >*</span> Channel contacts: </la        Bel> ';        html+= ' <div class= "formcontrols col-xs-8 col-sm-9" > ";        html+= ' <input type= "text" Name= "channel_people[] ' +userindex+ '" class= "Input-text radius" > ";        html+= ' </div> ';        html+= ' </div> ';        html+= ' <div class= "row cl mt-5" > "; html+= ' <label class= "Form-label col-xs-4 col-sm-3" ><span class= "c-red" >*</span> Channel contacts jobs: </        Label> ';     html+= '       <div class= "Formcontrols col-xs-8 col-sm-9" > ";        html+= ' <input type= "text" Name= "channel_position[] ' +userindex+ '" class= "Input-text radius" > ";        html+= ' </div> ';        html+= ' </div> ';        html+= ' <div class= "row cl mt-5" > "; html+= ' <label class= "Form-label col-xs-4 col-sm-3" ><span class= "c-red" >*</span> Channel contacts Tel: </        Label> ';        html+= ' <div class= "formcontrols col-xs-8 col-sm-9" > ";        html+= ' <input type= "text" Name= "channel_tel[] ' +userindex+ '" class= "Input-text radius" > ";        html+= ' </div> ';        html+= ' </div> ';        html+= ' <div class= "row cl mt-5" > "; html+= ' <label class= "Form-label col-xs-4 col-sm-3" ><span class= "c-red" >*</span> Channel contacts Mobile: </        Label> '; html+= ' <div class= "Formcontrols col-xs-8 col-sm-9 ">";        html+= ' <input type= "text" Name= "channel_phone[] ' +userindex+ '" class= "Input-text radius" > ";        html+= ' </div> ';        html+= ' </div> ';        html+= ' <div class= "row cl mt-5" > ";        html+= ' <label class= "Form-label col-xs-4 col-sm-3" >:</label> ";        html+= ' <div class= "formcontrols col-xs-8 col-sm-9" > ";        html+= ' <input type= "text" Name= "channel_wx[]" class= "Input-text radius" > ";        html+= ' </div> ';        html+= ' </div> ';        html+= ' <div class= "row cl mt-5" > ";        html+= ' <label class= "Form-label col-xs-4 col-sm-3" >QQ:</label> ";        html+= ' <div class= "formcontrols col-xs-8 col-sm-9" > ";        html+= ' <input type= "text" Name= "channel_qq[]" class= "Input-text radius" > ";       html+= ' </div> '; html+= ' </div> ';        html+= ' <div class= "row cl mt-5" > ";        html+= ' <label class= "Form-label col-xs-4 col-sm-3" > Mailbox:</label> ';        html+= ' <div class= "formcontrols col-xs-8 col-sm-9" > ";        html+= ' <input type= "text" Name= "channel_email[] ' +userindex+ '" class= "Input-text radius" > ";        html+= ' </div> ';        html+= ' </div> ';        html+= ' <div class= "row cl mt-5" > ";        html+= ' <label class= "Form-label col-xs-4 col-sm-3" > Other:</label> ';        html+= ' <div class= "formcontrols col-xs-8 col-sm-9" > ";        html+= ' <textarea name= "channel_other[]" class= "textarea" ></textarea> ";        html+= ' </div> ';        html+= ' </div> ';        html+= ' </div> ';        html+= ' <div class= "col-xs-12 col-sm-6 mt-10" > "; html+= ' <sPan class= "delpeople btn btn-danger radius" style= "cursor:pointer;"        >-</span> ';        html+= ' </div> ';        html+= ' </div> ';        $ (this). Parent (). before (HTML);            $ (' input[name= ' channel_people[] ' +userindex+ '] '). Rules ("Add", {required:true, iszh:true, Minlength:2, Maxlength:6, messages: {minlength: "min. 2 Chinese characters", maxlengt        H: "Up to 6 Chinese characters"});            $ (' input[name= ' channel_position[] ' +userindex+ '] '). Rules ("Add", {required:true, iszh:true, Minlength:2, Maxlength:6, messages: {minlength: "min. 2 Chinese characters", MaxLen        Gth: "Up to 6 Chinese characters"});         $ (' input[name= ' channel_tel[] ' +userindex+ '] '). Rules ("Add", {required:true, isphone:true});        $ (' input[name= ' channel_phone[] ' +userindex+ '] '). Rules ("Add", {required:true,    Istel:true, Minlength:11, maxlength:11, messages: {minlength: "Only 11 bits can be entered        Number ", MaxLength:" Can only enter 11 digits "}});    $ (' input[name= ' channel_email[] ' +userindex+ '] '). Rules ("Add", {isemail:true}); });

The above is to generate dynamic forms and to add validation rules for dynamic form elements.

JQuery's validator validation of dynamically added information