Validation with Javascript & jQuery using the Class Name

Introduction

 

This will explain the concept of validation using the class name in Javascript and jQuery. You just need to add the class 'mandatory' in control, then this control will be required for submission of the form. If it is not filled, then it will be highlighted red.


Code:

  1. function Validation() {      
  2. var isValid = true;      
  3. var classname = 'mandatory';      
  4. $('.' + classname + '').each(function (i, obj) {      
  5. if (obj.value == '') {      
  6. isValid = false;      
  7. return isValid;      
  8. }      
  9. });    
  10.     
  11. if (!isValid) {      
  12. $('.' + classname + '').each(function (i, obj) {      
  13. if (obj.value == '') {      
  14. obj.style.border = '1px solid red';      
  15. }      
  16. else {      
  17. obj.style.border = '1px solid black';      
  18. }      
  19. });      
  20. alert('Please fill mandatory details');      
  21. }      
  22. if (isValid) {      
  23. return confirm('Are you sure you want to save information? Once information stored will not be updated.')      
  24. }      
  25. return isValid;      
  26. }      
  27.     
  28. for ex.      
  29.     
  30. ASP textbox : <asp:TextBox ID="txtlocation" runat="server" CssClass="form-control mandatory"></asp:TextBox>       
  31. html input text : <input class="mandatory" type="text">