Jquery form submission results with error messages, jquery form

Jquery form submission results with error messages, jquery form

:

Html code:

<Form action = "" method = "" name = "form2"> <div class = "m_t30 error_div2"> <div> I am <select name = "identity" id =" ko "class =" form-control "> <option> </option> <option value =" investor "> investors </option> <option value =" developer "> real estate developers </option> </select> </div> <p class = "error_p2"> <I class = "glyphicon-info-sign"> </I> registration error message </p> </div> <div class = "m_t10 error_div2"> <div> <input type = "text" class = "form-control "name =" name "placeholder =" username "> </div> <p class =" error_p2 "> <I class =" glyphicon-info-sign "> </I> registration error message </p> </div> <div class = "m_t10 error_div2"> <div> <input type = "email" class = "form-control" name = "email" placeholder = "email"> </div> <p class = "error_p2"> <I class = "glyphicon- info-sign "> </I> registration error message </p> </div> <div class =" m_t10 error_div2 "> <div> <input type = "tel" class = "form-control" name = "phone" placeholder = "Mobile phone"> </div> <p class = "error_p2"> <I class = "glyphicon-info-sign"> </I> registration error message </p> </div> <div class = "m_t10 error_div2"> <div> <select name = "country" class = "form-control"> <option> </option> <option> country or region </option> <option value = "1"> china </option> <option value = "2"> USA </option> </select> </div> <p class = "error_p2"> <I class = "glyphicon-info-sign"> </I> registration error message </p> </div> <div class = "m_t10 error_div2"> <div> <select name = "province" class = "form-control"> <option> </option> <option> state/province </option> <option value = "1"> Guangdong </option> <option value = "2"> California </option> </select> </div> <p class = "error_p2"> <I class = "glyphicon-info-sign"> </I> registration error message </p> </div> <div class = "m_t10 error_div2"> <div> <input type = "password" class = "form-control" name = "pwd" placeholder = "password"> </div> <p class = "error_p2 "> <I class =" glyphicon-info-sign "> </I> registration error message </p> </div> <div class =" m_t10 error_div2 "> <div> <input type =" password "class =" form-control "name =" pwd2 "placeholder =" Confirm password again "> </div> <div> <p class = "error_p2"> <I class = "glyphicon-info-sign"> </I> registration error message </p> </div> <div class = "m_t10"> <div> <button class = "btn btn_login" type = "button" onclick = "btn_register () "> next </button> </div> </form>

Css code:

<style>  .m_t10 {    margin-top: 20px;  }  .error_p2 {    background-color: #FF6900;    color: white;    font-size: 10px;    padding: 5px;    border-radius: 5px;    display: none;  }  .error_p2 i {    margin-right: 5px;  }</style>

Js Code

<! -- Registration error judgment form2 --> <script> // defines all data to be submitted as an array validate2, and all values are false var validate2 = {identity: false, name: false, phone: false, email: false, country: false, province: false, mail: false, pwd: false, pwd2: false}; var msg = ""; // define the prompt information // determine the role $ ('select [name = identity] ', form2 ). blur (function () {var identity = $ (this ). val (); var span = $ (this ). parents ('. error_div2 '). find ('. error_p2 '); // determines whether the user name is null if (Identity = '') {msg = '<I class =" glyphicon-exclamation-sign "> </I>' +" Enter your identity "; span.html (msg); span.css ('display', 'inline'); validate2.identity = false; return;} else {msg = ""; span.css ('display ', 'None'); validate2.identity = true; return ;}) // you can specify the username $ ('input [name = name] ', form2 ). blur (function () {var name = $ (this ). val (); var span = $ (this ). parents ('. error_div2 '). find ('. err Or_p2 '); // determines whether the user name is null if (name = '') {msg = '<I class = "glyphicon-exclamation-sign"> </I>' + "Enter the user name"; span.html (msg); span.css ('display ', 'line'); validate2.name = false; return;} else {msg = ""; span.css ('display', 'None'); validate2.name = true; return ;}}) // determine the phone $ ('input [name = phone] ', form2 ). blur (function () {var phone = $ (this ). val (); var span = $ (this ). parents ('. error_div2 '). fi Nd ('. error_p2 '); // determines whether the user name is null if (phone = '') {msg = '<I class = "glyphicon-exclamation-sign"> </I>' + "Enter the mobile phone number"; span.html (msg); span.css ('display ', 'line'); validate2.phone = false; return;} else {msg = ""; span.css ('display', 'None'); validate2.phone = true; return ;}}) // determine the country $ ('select [name = country] ', form2 ). blur (function () {var country = $ (this ). val (); var span = $ (this ). parents ('. Error_div2 '). find ('. error_p2 '); // determines whether the user name is null if (country = '') {msg = '<I class = "glyphicon-exclamation-sign"> </I>' + "enter the country"; span.html (msg); span.css ('display ', 'line'); validate2.country = false; return;} else {msg = ""; span.css ('display', 'None'); validate2.country = true; return ;}}) // determine the province $ ('select [name = province] ', form2 ). blur (function () {var province = $ (this ). val (); var s Pan = $ (this ). parents ('. error_div2 '). find ('. error_p2 '); // determines whether the user name is null if (province = '') {msg = '<I class = "glyphicon-exclamation-sign"> </I>' + "Enter the province or state"; span.html (msg ); span.css ('display', 'inline'); validate2.province = false; return;} else {msg = ""; span.css ('display', 'None'); validate2.province = true; return ;}}) // determine the zip code $ ('input [name = mail] ', form2 ). blur (function () {var mail = $ (This ). val (); var span = $ (this ). parents ('. error_div2 '). find ('. error_p2 '); // determines whether the user name is null if (mail = '') {msg = '<I class = "glyphicon-exclamation-sign"> </I>' + "Enter the zip code"; span.html (msg ); span.css ('display', 'inline'); validate2.mail = false; return;} else {msg = ""; span.css ('display', 'None'); validate2.mail = true; return ;}}) // determines the email $ ('input [name = email] ', form2 ). blur (function () {v Ar email = $ (this ). val (); var reg =/\ w + [@] {1} \ w + [.] \ w +/; var span = $ (this ). parents ('. error_div2 '). find ('. error_p2 '); if (email = '') {msg = '<I class = "glyphicon-exclamation-sign"> </I>' + "Enter the email address"; span.html (msg); span.css ('display ', 'line'); validate2.eamil = false; return;} else if (reg. test (email) = false) {msg = '<I class = "glyphicon-exclamation-sign"> </I>' + "Incorrect email format "; Span.html (msg); span.css ('display', 'inline'); validate2.email = false; return;} else {msg = ""; span.css ('display ', 'None'); validate2.email = true; return ;}) // determine the password $ ('input [name = pwd] ', form2 ). blur (function () {var pwd = $ (this ). val (); var span = $ (this ). parents ('. error_div2 '). find ('. error_p2 '); // determines whether the user name is null if (pwd = '') {msg = '<I class = "glyphicon-exclamation-sign"> </I>' + "No Password Empty "; span.html (msg); span.css ('display', 'inline'); validate2.pwd = false; return;} else {msg =" "; span.css ('display ', 'None'); validate2.pwd = true; return ;}}) // confirm the password again $ ('input [name = pwd2] ', form2 ). blur (function () {var pwd2 = $ (this ). val (); var span = $ (this ). parents ('. error_div2 '). find ('. error_p2 '); // determines whether the user name is null if (pwd2 = '') {msg =' <I class =" glyphicon-exclamation-sign "> </I> '+ "Confirm Password cannot be blank"; span.html (msg); span.css ('display', 'inline'); validate2.pwd2 = false; return;} else if (pwd2! = $ ('Input [name = pwd] ', form2 ). val () {msg = '<I class = "glyphicon-exclamation-sign"> </I>' + "confirm that the password is different from the password "; span.html (msg); span.css ('display', 'inline'); validate2.pwd2 = false; return;} else {msg = ""; span.css ('display ', 'None'); validate2.pwd2 = true; return ;}}) // submit the form. The value of isOK is true and false for all submitted information. // if either of them is false, the value of isOK is false. If the value of isOK is false, all the focus loss events of the form elements are executed once. Only when the error message is prompted and the value of isOK is true Submit the form. // Because some pages may have more than one form to be submitted or the names of some form elements are repeated ".. "To identify the event of element loss. Here form2 is the corresponding <form name> function btn_register () {var isOK = validate2.identity & validate2.name & validate2.phone & validate2.email & validate2.mail & validate2.country & validate2.province & validate2.pwd & validate2.pwd2; var form2 = $ ('form [name = form2] '); if (isOK ){//... Execute the submit event form2.submit ();} else {$ ('select [name = identity] ', form2 ). trigger ('blur'); $ ('input [name = name] ', form2 ). trigger ('blur'); $ ('input [name = phone] ', form2 ). trigger ('blur'); $ ('input [name = email] ', form2 ). trigger ('blur'); $ ('input [name = mail] ', form2 ). trigger ('blur'); $ ('select [name = country] ', form2 ). trigger ('blur'); $ ('select [name = province] ', form2 ). trigger ('blur'); $ ('input [name = pwd] ', form2 ). trigger ('blur'); $ ('input [name = pwd2] ', form2 ). trigger ('blur') ;}</script>

Brief description:

// Execute the loss focus event for the corresponding form Element $ ('input [name = XX] ', formX ). blur () // define the corresponding parameter to obtain the value, for example, var pwd = $ (this ). val (); // define the parameter to obtain the Tag Element Object corresponding to the error message. Here, var span =$ (this ). parents ('. error_div2 '). find ('. error_p2 '); // brief description. the parents ('') method obtains the result that the ancestor element is ('. error_div2 '). Check whether "s" is included. To put it simply, if. error_div2 is the upper level of the current element $ ('easy '). parent (). parent (). parent (), and $ ('this '). parents ('. error_div2 ') can get this element object in one step, while the find ('') method is just the opposite. Get the corresponding Element Object in one step and then determine based on the condition, the regular expressions are different. For example (because I cannot remember so many =,), whether the returned values of true and false array elements meet the requirements for hiding the error message, and assign values to the array validate2. // When the final form is submitted, execute again to determine whether isOK is true/If the isOK value is false, execute all the focus loss events of the form Element once, the error message // If the isOK value is true, the form is submitted. // Ps: If the button element in the form is not the submit button, remember to set type = "button"; otherwise, the default value is "type =" submit ", and click" submit;

Written at the end:

I am sorry that the style and layout are not properly set and the page effect is poor.

In other words, write jq first to figure out What objects to get, what events to execute, and what effect the final element objects have, parents and find methods and save time, however, when using this function, you must embed a div to achieve the overall effect.

The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!