Post
Ask Question

jQuery form validation with .bind('submit')

Here is the script to demonstrate how to validate in JQuery with form bind submit function.
 
Step 1: Download the attached project, copy and add given .js file to your project.
  1. <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
Step 2: Add a form with HTML controls.
  1. <form>  
  2. <table>  
  3. <tr>  
  4. <th>  
  5. <label>  
  6. * First Name:</label>  
  7. </th>  
  8. <th>  
  9. <label>  
  10. * Last Name:</label>  
  11. </th>  
  12. </tr>  
  13. <tr>  
  14. <td>  
  15. <input class='mktFormText mktFormString mktFReq input_txt1' id="FirstName" maxlength='255'  
  16. name="FirstName" tabindex='1' type='text' value="">  
  17. <br>  
  18. </td>  
  19. <td>  
  20. <input class='mktFormText mktFormString mktFReq input_txt1' id="LastName" maxlength='255'  
  21. name="LastName" tabindex='2' type='text' value="">  
  22. <br>  
  23. </td>  
  24. </tr>  
  25. <tr>  
  26. <th>  
  27. <label>  
  28. * Company Name:</label>  
  29. </th>  
  30. <th>  
  31. <label>  
  32. * Email Address:</label>  
  33. </th>  
  34. </tr>  
  35. <tr>  
  36. <td>  
  37. <input class='mktFormText mktFormString mktFReq input_txt1' id="Company" maxlength='255'  
  38. name="Company" tabindex='3' type='text' value="">  
  39. <br>  
  40. </td>  
  41. <td>  
  42. <input class='mktFormText mktFormEmail mktFReq input_txt1' id="Email" maxlength='255'  
  43. name="Email" tabindex='4' type='text' value="">  
  44. <br>  
  45. </td>  
  46. </tr>  
  47. <tr>  
  48. <td colspan="2" align="right">  
  49. <input id='mktFrmSubmit' name='submitButton' class="input_submit" type='submit' value='Submit'>  
  50. </td>  
  51. </tr>  
  52. </table>  
  53. </form>  
Step 3: Add script for validation on various input controls.
 
  1. <script type="text/javascript">  
  2. $(function () {  
  3. $('form').bind('submit', function (e) {  
  4. var $firstName = $("#FirstName"), $lastName = $("#LastName"), $company = $("#Company"), $email = $("#Email"), errors = "";  
  5. if (!$firstName.val().length) {  
  6. errors += "* Please enter your first name.\n";  
  7. }  
  8. if (!$lastName.val().length) {  
  9. errors += "* Please enter your last name.\n";  
  10. }  
  11. if (!$company.val().length) {  
  12. errors += "* Please enter your company name.\n";  
  13. }  
  14. if (!$email.val().length) {  
  15. errors += "* Please enter your email address.\n";  
  16. }  
  17. if (errors.length) {  
  18. alert("One or more errors occurred:\n\n" + errors);  
  19. return false;  
  20. }  
  21. });  
  22. })  
  23. </script>  
Step 4: Run and check.