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.