How to validate input field while focusout ?

The focusout() method in jQuery is used to remove the focus from the selected element. Now we will use focusout() method to validate the input field while focussing out. This method checks whether the input field is empty or not. Also, use some CSS property to display input field validation. If the input field is empty then it will display the red border input field otherwise display green border input field.

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
  
<head
    <script src=
    </script
      
    <style
        form { 
            border: 2px solid black;
            border-radius:12px;            
            width: 50%; 
            padding: 20px; 
            background-color:#fffa86;
        
        label {
            color:brown;
            font-weight:bold;
        }
        input { 
        border: 2px solid grey; 
        border-radius:12px;
            padding: 5px; 
            margin: 10px; 
            outline:none;
        }     
    </style
</head>
  
<body
    <h3>Validation if input field empty:</h3>
      
    <form>
        <label><em>Enter Name:</em></label
        <input type="text" name="name" required autocomplete="off">
        <br
        <label><em>Enter Password:</em></label
        <input type="password" name="pwd" required autocomplete="off">
        <br
        <label><em>Enter Email Id:</em></label
        <input type="email" name="eid" required autocomplete="off">
    </form
      
    <script
        $(document).ready(function() { 
            $("input").focusout(function() { 
                if($(this).val()=='') { 
                    $(this).css('border', 'solid 2px red'); 
                }
                else {
                      
                    // If it is not blank.
                    $(this).css('border', 'solid 2px green');    
                }    
            }) .trigger("focusout");
        }); 
    </script
</body
  
</html

chevron_right


Output:



Example 2: Validation alert if input field empty using siblings(), addClass() method.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
     
<head
    <link rel="stylesheet" href=
    integrity=
"sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
    crossorigin="anonymous">
      
    <script src=
    </script
      
    <style
        form { 
            border: 2px solid black;
            border-radius:12px;            
            width: 50%; 
            padding: 20px; 
            background-color:#fffa86;
        
        label {
            color:brown;
            font-weight:bold;
        }
        input { 
            border: 2px solid grey; 
            border-radius:12px;
            padding: 5px; 
            margin: 10px; 
            outline:none;
        
        .myelement {
            visibility: hidden;
         }
        .isempty:after {
            content:"<i style='color:red;' class='fas fa-thumbs-down'></i>"
        }
        .emptynot:after {
            content:"<i style='color:green;' class='fas fa-thumbs-up'></i>"
        }
    </style
</head
  
<body
    <h3>
        Validation alert if input field empty
    </h3>
      
    <form
        <div id="input1">
            <label><em>Enter Name:</em></label
            <input type="text" name="name" required autocomplete="off">
                <i style='color:grey;' class='fas '></i>
        </div>
          
        <br
      
        <div id="input2">
            <label><em>Enter Password:</em></label
            <input type="password" name="pwd" required autocomplete="off">
            <i style='color:grey;' class='fas '></i>
        </div>
          
        <br
          
        <div id="input3">
            <label><em>Enter Email Id:</em></label
            <input type="email" name="eid" required autocomplete="off">
            <i style='color:grey;' class='fas '></i>
        </div>
    </form>
      
    <script
        $(document).ready(function() {
            $('div input').focusout(function() {                   
                if($(this).val()=='' ) {  
                    var error=$(this).siblings('i');
                    error.addClass("fa-thumbs-up").css('color', 'red');
                }
                else {
                    var correct=$(this).siblings('i');
                    correct.addClass("fa-thumbs-up").css('color', 'green');
                }
            }).trigger("focusout");
        });
    </script
</body
  
 </html

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.