Post
Ask Question

Button Enable Validation Using Jquery

In this code snippet you will learn how to make enable and disable button validation based on user inputs  using JQuery scripting.
 
The following is the HTML code I used for this code snippet.
 
HTML 
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5. </head>  
  6. * All fields must have a value :  
  7. <br />  
  8. <br/> Field 1 :  
  9. <input type="text" id="field1" name="field3" />  
  10. <br>  
  11. <br> Field 2 :  
  12. <input type="text" id="field2" name="field2" />  
  13. <br>  
  14. <br> Field 3 :  
  15. <input type="text" id="field3" name="field3" />  
  16. <br />  
  17. <br />  
  18. <button id="add-fields" disabled>Click</button>  
  19. </body>  
  20.   
  21. </html>  
The following is the JQuery scripting I used for this code snippet.
 
JQuery 
  1. <script>  
  2.     $(document).ready(function() {  
  3.         var elems = $('#field1, #field2, #field3');  
  4.         elems.on('keyup', function() {  
  5.             var hasValue = elems.filter(function() {  
  6.                 return this.value.length  
  7.             }).length != elems.length;  
  8.             console.log(hasValue)  
  9.             $('#add-fields').prop("disabled", hasValue);  
  10.         });  
  11.     });  
  12. </script>  
Complete code 
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  6.     <script>  
  7.         $(document).ready(function() {  
  8.             var elems = $('#field1, #field2, #field3');  
  9.             elems.on('keyup', function() {  
  10.                 var hasValue = elems.filter(function() {  
  11.                     return this.value.length  
  12.                 }).length != elems.length;  
  13.                 console.log(hasValue)  
  14.                 $('#add-fields').prop("disabled", hasValue);  
  15.             });  
  16.         });  
  17.     </script>  
  18. </head>  
  19.   
  20. <body>  
  21.     * All fields must have a value :  
  22.     <br />  
  23.     <br/> Field 1 :  
  24.     <input type="text" id="field1" name="field3" />  
  25.     <br>  
  26.     <br> Field 2 :  
  27.     <input type="text" id="field2" name="field2" />  
  28.     <br>  
  29.     <br> Field 3 :  
  30.     <input type="text" id="field3" name="field3" />  
  31.     <br />  
  32.     <br />  
  33.     <button id="add-fields" disabled>Click</button>  
  34. </body>  
  35.   
  36. </html>  
Output 
 
 
 

Conclusion

I hope you liked this code snippets. Thanks for reading provide your valuable comments.