WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

How to Check If an Input Field is Empty Using jQuery

Topic: JavaScript / jQueryPrev|Next

Answer: Use the jQuery val() Method

You can use the val() method to test or check if inputs are empty in jQuery.

The following example will add a red outline around the inputs if it is focused but not filled out.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <title>Check If Inputs are Empty using jQuery</title>
  • <style>
  •     .error{
  •         outline: 1px solid red;
  •     }    
  • </style>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script>
  • $(document).ready(function(){
  •     $('#myForm input[type="text"]').blur(function(){
  •         if(!$(this).val()){
  •             $(this).addClass("error");
  •         } else{
  •             $(this).removeClass("error");
  •         }
  •     });
  • });
  • </script>
  • </head>
  • <body>
  •     <form id="myForm">
  •         <p><label>First Name: <input type="text"></label></p>
  •         <p><label>Last Name: <input type="text"></label></p>
  •         <p><label>Email Address: <input type="text"></label></p>
  •     </form>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

Your Feedback:

We would love to hear from you, please drop us a line.