How to Create Form Validator

Submitted by alpha_luna on Friday, June 10, 2016 - 16:56.
In this article, we are going to create Form Validator. This simple article, we are going to learn about form validator. Form validator does not allow empty field like TextBoxes, combo box, TextArea, checkbox, and radio button. This simple source code is very helpful and easy to use. Kindly follow the steps below. Creating Form Field and add a checkbox, button, and six TextBoxes as in the image below. ResultHere's the source code of the image above. 
  1. <form class="form-horizontal">
  2. 	<div class="control-group">
  3. 	<label class="control-label" for="inputPassword">First Name</label>
  4. 	<div class="controls">
  5. 	<input type="text" id="inputPassword" placeholder="First Name . . . . ." />
  6. 	</div>
  7. 	</div>
  8. 	<div class="control-group">
  9. 	<label class="control-label" for="inputPassword">Middle Name</label>
  10. 	<div class="controls">
  11. 	<input type="text" id="inputPassword" placeholder="Middle Name . . . . ." />
  12. 	</div>
  13. 	</div>
  14. 	<div class="control-group">
  15. 	<label class="control-label" for="inputPassword">Last Name</label>
  16. 	<div class="controls">
  17. 	<input type="text" id="inputPassword" placeholder="Last Name . . . . ." />
  18. 	</div>
  19. 	</div>
  20. 	<div class="control-group">
  21. 	<label class="control-label" for="inputPassword">User Name</label>
  22. 	<div class="controls">
  23. 	<input type="text" id="inputPassword" placeholder="User Name . . . . ." />
  24. 	</div>
  25. 	</div>
  26. 	<div class="control-group">
  27. 	<label class="control-label" for="inputPassword">Password</label>
  28. 	<div class="controls">
  29. 	<input type="password" id="inputPassword" placeholder="Password . . . . ." />
  30. 	</div>
  31. 	</div>
  32. 	<div class="control-group">
  33. 	<label class="control-label" for="inputPassword">Address</label>
  34. 	<div class="controls">
  35. 	<input type="text" id="inputPassword" placeholder="Address . . . . ." />
  36. 	</div>
  37. 	</div>
  38. 	<div class="control-group">
  39. 	<div class="controls">
  40. 	<label class="checkbox">
  41. 	<input type="checkbox" /> Remember me
  42. 	</label>
  43. 	<button type="submit" class="btn btn-primary"> Sign In </button>
  44. 	</div>
  45. 	</div>
  46. </form>
We are going to insert the "required" in every input field for validation as you can see in the image below. ResultHere's the source code of the image above. 
  1. <form class="form-horizontal">
  2. 	<div class="control-group">
  3. 	<label class="control-label" for="inputPassword">First Name</label>
  4. 	<div class="controls">
  5. 	<input type="text" id="inputPassword" placeholder="First Name . . . . ." required/>
  6. 	</div>
  7. 	</div>
  8. 	<div class="control-group">
  9. 	<label class="control-label" for="inputPassword">Middle Name</label>
  10. 	<div class="controls">
  11. 	<input type="text" id="inputPassword" placeholder="Middle Name . . . . ." required />
  12. 	</div>
  13. 	</div>
  14. 	<div class="control-group">
  15. 	<label class="control-label" for="inputPassword">Last Name</label>
  16. 	<div class="controls">
  17. 	<input type="text" id="inputPassword" placeholder="Last Name . . . . ." required />
  18. 	</div>
  19. 	</div>
  20. 	<div class="control-group">
  21. 	<label class="control-label" for="inputPassword">User Name</label>
  22. 	<div class="controls">
  23. 	<input type="text" id="inputPassword" placeholder="User Name . . . . ." required />
  24. 	</div>
  25. 	</div>
  26. 	<div class="control-group">
  27. 	<label class="control-label" for="inputPassword">Password</label>
  28. 	<div class="controls">
  29. 	<input type="password" id="inputPassword" placeholder="Password . . . . ." required />
  30. 	</div>
  31. 	</div>
  32. 	<div class="control-group">
  33. 	<label class="control-label" for="inputPassword">Address</label>
  34. 	<div class="controls">
  35. 	<input type="text" id="inputPassword" placeholder="Address . . . . ." required />
  36. 	</div>
  37. 	</div>
  38. 	<div class="control-group">
  39. 	<div class="controls">
  40. 	<label class="checkbox">
  41. 	<input type="checkbox" required /> Remember me
  42. 	</label>
  43. 	<button type="submit" class="btn btn-primary"> Sign In </button>
  44. 	</div>
  45. 	</div>
  46. </form>
No more javascript to add. Hope that this article will help you a lot. Thank you. So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you very much.

Tags

Add new comment

About text formats
  • 37 views