JQuery validate + artdialog + jquery form

JQuery validate + artdialog + jquery form

Function Description:

A form is displayed on the page. ajax does not need to submit a new form. The form must pass verification.

Applicability:

Applies to adding and modifying records on the list page.

Js files to be loaded:

Jquery. min. js

ArtDialog. js

IframeTools. js

Jquery. form. js

Jquery. validate. js

Implementation ideas:

Put the form in a hidden container on the page, use artdialog to pop up the form and add jqueryvalidate verification to the form. jqueryform ajax is used for submission, because there is a small amount of code written using existing 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 = "right" class = "td_normal_title"> nickname: </td> <input readonly onFocus = "this. blur () "type =" text "id =" bHname "value =" "> </td> <td width = 20% align =" right "class =" td_normal_title "> nickname: </td> <input readonly onFocus = "this. blur () "id =" bSpell "type =" text "value =" "> </td> </tr> <td width = 15% align =" right "class =" td_normal_title "> Name: </td> <input readonly onFocus = "this. B Lur () "id =" bEmpName "type =" text "value =" "> </td> <td width = 15% align =" right "class =" td_normal_title "> gender: </td> <input readonly onFocus = "this. blur () "id =" bH_sex "type =" text "value =" "> </td> </tr> <td width = 15% align =" right "class =" td_normal_title "> department: </td> <input readonly onFocus = "this. blur () "id =" bDept "type =" text "value =" "> </td> <td width = 15% align =" right "class =" td_normal_title "> title: </td> <Input readonly onFocus = "this. blur () "id =" bPosition "type =" text "value =" "> </td> </tr> <td width = 15% align =" right "class =" td_normal_title "> application time: </td> <input readonly onFocus = "this. blur () "id =" bRegTime "type =" text "value =" "> </td> <td width = 15% align =" right "class =" td_normal_title "> audit time: </td> <input readonly onFocus = "this. blur () "id =" bAuditTime "type =" text "value =" "> </td> </tr> <td width = 15% Align = "right" class = "td_normal_title"> nickname Source: </td> <input readonly onFocus = "this. blur () "id =" bFrom "type =" text "value =" "> </td> <td width = 15% align =" right "class =" td_normal_title "> nickname note: </td> <input readonly onFocus = "this. blur () "id =" bRemark "type =" text "value =" "> </td> </tr> </table> </div> a <script language =" javascript" type = "text/javascript"> // form Verification $. validator. addMethod ('checkhname', function () {v Ar 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, 'emp': $ (" # username "). val ()}, type: "get", async: false, cache: false, timeout: 10000, success: function (data) {eval ('var result = '+ data); validate = result. pass; strHnameValideResult = result. message; if (validate = true | validate = 'true') {$ ('# spell '). val (result. pinyin); $ ('# hname '). val (hname) ;}}); return validate ;}); // form Verification $. validator. addMethod ('C Heckuser', function () {var validate = false; var username = $ ("# username"). val (); if (username! = "0") {validate = true;} return validate;}); // form Verification $. 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, checkH Name: true}, h_sex: {required: true}, messages: {r_a: {min: 'file type mandatory '}, r_ B: {required: 'File name required '}, r_c: {required: 'Flower name required', minlength: "enter 2 Chinese characters", maxlength: "enter 2 Chinese characters ", checkHname: 'This nickname is used or does not comply with the rule'}, h_sex: {required: "Gender required" }}}); $ (document ). ready (function () {var options = {target: '# output2', success: showResponse // post-submit callback}; $ ('# myForm '). ajaxForm (options); var alt = null; $ ("# List_ViewTable tr "). click (function () {Var empid = $ (this). find ("input [type = 'checkbox']"). val (); if (empid! = "") {$. Ajax ({url: "/mipdemo/app/hname/index. php? R = hname/userInfo ", data: {'empid': empid}, type:" get ", cache: 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: 'shutdown ', callback: function () {}}]}) ;}}); function showResponse (data) {if (alt! = Null) {alt. close () ;}if (data = 'success') {artDialog. alert ('saved successfully');} else {art. dialog. close (); artDialog. alert ('failed to save ') ;}}); </script>

The above is a detailed description of jQuery validate + artdialog + jquery form implementation pop-up form. I hope it will help you!