How to validate input field while focusout ?

Read

Discuss

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:

<!DOCTYPE html>  
<html>  
  
<head>  
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">  
    </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>  

Output:

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

<!DOCTYPE html>  
<html>  
     
<head>  
    <link rel="stylesheet" href= 
"https://use.fontawesome.com/releases/v5.7.0/css/all.css" 
    integrity= 
"sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
    crossorigin="anonymous"> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">  
    </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>  

Output:

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 17 Jul, 2019

How to create To-Do List using jQuery?

What is thread safe or non-thread safe in PHP ?

How to validate input field while focusout ?

Please Login to comment...