JQuery validate+artdialog+jquery form to implement pop-up form ideas detailed _jquery

Function Description:

In the page pop-up form, Ajax no refresh submission form, the form needs to pass validation.

Scope of application:

Applies to new, modified records on the list page.

Need to load the JS file:

Jquery.min.js

Artdialog.js

Iframetools.js

Jquery.form.js

Jquery.validate.js

Realize the idea:

In the page, put the form in a hidden container, pop the form with Artdialog and add jqueryvalidate validation to the form, submit using Jqueryform Ajax submissions, because they are very small in writing code with ready-made plug-ins.

<div id= "G_CN" style= "display:none;width:700px;" > <table id= "base_info" class= "Tb_normal" width= "96%" > <!--news content--> <tr> <td width=20% align= "Ri Ght "class=" Td_normal_title "> Nickname:</td> <td><input readonly onfocus=" This.blur () "type=" text "id=" Bhname "value=" "></td> <td width=20% align=" right "class=" Td_normal_title "> nickname Pinyin:</td> <td
><input readonly onfocus= "This.blur ()" id= "Bspell" type= "text" value= "" ></td> </tr> <tr> &LT;TD width=15% align= "right" class= "Td_normal_title" > Name:</td> <td><input readonly "onfocus=" This.blur () "id=" Bempname "type=" text "value=" "></td> <td width=15% align=" right "class=" Td_normal_title " > Gender:</td> <td><input readonly onfocus= "This.blur ()" id= "Bh_sex" type= "text" value= "" ></td > </tr> <tr> <td width=15% align= "right" class= "Td_normal_title" > Department:</td> <td>< Input readonly onfocus= "this. Blur () "id=" bdept "type=" text "value=" "></td> <td width=15% align=" right "class=" Td_normal_title "> title:
</td> <td><input readonly onfocus= "This.blur ()" id= "Bposition" type= "text" value= "" ></td> </tr> <tr> <td width=15% align= "right" class= "Td_normal_title" > Application time:</td> <td>< Input readonly onfocus= "This.blur ()" id= "Bregtime" type= "text" value= "" ></td> <td width=15% align= "right" class= "Td_normal_title" > Audit time:</td> <td><input readonly onfocus= "This.blur ()" id= "Baudittime" type = "text" value= "" ></td> </tr> <tr> <td width=15% align= "right" class= "Td_normal_title" >
Nickname Source:</td> <td><input readonly onfocus= "This.blur ()" id= "Bfrom" type= "text" value= "" ></td> &LT;TD width=15% align= "right" class= "Td_normal_title" > Nickname comment:</td> <td><input "ReadOnly" This.blur () "id=" Bremark "type=" text "value=" "></td> </tr> </tablE> </div> A <script language= "javascript" type= "Text/javascript" >//form validation $.validator.addmethod (' Checkhname ', function () {var validate=false; var hname = $ ("#r_c"). Val (). replace (/\s/g, '). substr ($ ("#r_c"). Val ().
length-2,2); $.ajax ({url: "/mipdemo/app/hname/index.php?r=hname/checkhname", data: {' hname ': hname, ' Empid ': $ ("#username"). Val () }, type: "Get", Async:false, Cache:false, timeout:10000, success:function (data) {eval (' var result = ' + data '); Val
Idate = Result.pass;
Strhnamevalideresult = Result.message;
if (validate = = True | | validate = = ' true ') {$ (' #spell '). Val (Result.pinyin); $ (' #hname '). Val (hname);}
});
return validate;
}); Form verifies $.validator.addmethod (' CheckUser ', function () {var validate=false; var username = $ ("#username"). Val (); if (
Username!= "0") {validate = true;} return validate;
}); Form verifies $.validator.addmethod (' Checksex ', function () {var validate=false; $ ("Input[name= ' H_sex ')"). each (function () {if ($ (this). attr ("checked") = = "true") {validate = true;}})
return validate;
}); $ (' #myForm '). Validate ({errorplacement:function (error, Element) {if (element.attr ("name")!= "H_sex") {element.parent
(). Find (' label '). Remove (); }else{element.parent (). Find (' Label.onerror,label.oncorrect '). Remove ();} element.parent (). Append (Error.attr ('
Class ', ' OnError ')); }, success:function (label) {Label.removeclass ("Oncorrect"). Removeclass ("OnError"); Label.addclass (' Oncorrect ').
Text ('); }, Onkeyup:true, rules: {r_a:{min:1}, r_b:{required:true}, r_c:{required:true, Minlength:2, Maxlength:2, CheckHnam 
E:true}, h_sex:{required:true}, messages: {r_a:{min: ' Work type required '}, r_b:{required: ' Work name must be filled in '}, r_c:{required: ' Nickname must fill ',
MinLength: "Please enter 2 Chinese", MaxLength: "Please enter 2 Chinese", Checkhname: ' This nickname has used or does not conform to the rule '}, h_sex:{required: "Sex must select"}}); $ (document). Ready (function () {var options = {target: ' #output2 ', success:showresponse//Post-submit callback}; $ (' #my
Form '). Ajaxform (options);
var alt =null; $ ("#List_ViewTable tr"). Click (function () {varEmpid = $ (this). Find ("input[type= ' checkbox ']"). Val (); if (Empid!= "") {$.ajax ({url: "/mipdemo/app/hname/index.php?r=hname/userinfo", data: {' Empid ': Empid}, type: "Get", C
Ache:false, timeout:10000, success:function (data) {var result = $.parsejson (data); $ ("#bHname"). Val (Result.hname);
$ ("#bSpell"). Val (Result.spell); $ ("#bEmpName"). Val (result.
EmpName);
$ ("#bH_sex"). Val (Result.h_sex);
$ ("#bDept"). Val (Result.deptname); $ ("#bPosition"). Val (result.
Positionname);
$ ("#bRegTime"). Val (result.regtime);
$ ("#bAuditTime"). Val (result.audit_time);
$ ("#bFrom"). Val (result.r_a + result.r_b);
$ ("#bRemark"). Val (result.r_d);
if (Alt!=null) {alt.close ();} alt=art.dialog ({title: ' User Information ', content:document.getElementById (' g_cn '), width:750, button: [{name: ' Save ', Focus:true, Callback:function () {$ (' #myForm '). Submit (); return false;}, {name: ' Close ', callb
Ack:function () {}}]});
}
});
}
}); function Showresponse (data) {if (Alt!=null) {alt.close ();} if (data== ' success ') {Artdialog.alert ('Save Success ');
}else{art.dialog.close (); Artdialog.alert (' Save Failed ');}
}); </script>

The above is a small series to introduce the jquery validate+artdialog+jquery form to realize pop-up form ideas, I hope to help!