Here I will explain how to validate user registration form using jQuery on submit or jQuery validate form before submit on button click.
Description:
In previous article I explained jQuery Show hide and toggle div example, jQuery calculate pageload time, jQuery scrollable div with fixed header, change page title in jquery dynamically, Disable drag and drop options in textbox or textarea controls, JavaScript show number of characters left in textbox and many articles relating to asp.net, jQuery, JavaScript. Now I will explain how to validate registration form in jQuery before submit on button click.
To implement this we need to write the code like as shown below
| <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1"> <title>jQuery Registration Form Validation</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script> <script language="javascript" type="text/javascript"> $(function() { $('#btnvalidate').click(function() { var summary = ""; summary += isvaliduser(); summary += isvalidFirstname(); summary += isvalidLocation(); if (summary != "") { alert(summary); return false; } else { return true; } }) }) function isvaliduser() { var temp = $("#txtuser").val(); if (temp == "") { return ("Please Enter UserName" + "\n"); } else { return ""; } } function isvalidFirstname() { var temp = $("#txtfname").val(); if (temp == "") { return ("Please Enter firstname" + "\n"); } else { return ""; } } function isvalidLocation() { var temp = $("#txtlocation").val(); if (temp == "") { return ("Please Enter Location" + "\n"); } else { return ""; } } </script> </head> <body> <form id="form1"> <table align="center"> <tr> <td>UserName</td> <td> <input type="text" id="txtuser" /> </td> </tr> <tr> <td>First Name</td> <td> <input type="text" id="txtfname" /> </td> </tr> <tr> <td>Location</td> <td> <input type="text" id="txtlocation" /> </td> </tr> <tr> <td></td> <td> <input type="button" value="Validate" id="btnvalidate" /> </td> </tr> </table> </form> </body> </html> |
Live Demo
To check for live demo try to click on below button
|
Note: if you want to use for asp.net controls replace $("#txtlocation").val(); you’re your asp.net control id like this $("#<%=txtlocation.ClientID %>").val()
No comments:
Post a Comment