How to validate input field while focusout ? Last Updated : 17 Jul, 2019 Summarize Comments Improve Suggest changes Share Like Article Like Report 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: html <!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. html <!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: Comment More infoAdvertise with us Next Article How to force Input field to enter numbers only using JavaScript ? V VigneshKannan3 Follow Improve Article Tags : JavaScript jQuery-Selectors jQuery-Misc Similar Reads How to Remove Focus from Input Field in TypeScript ? Removing the focus from an input field is a common requirement in web development. This can be useful in scenarios like form validation, user interactions, or controlling focus behavior. The below approaches can be used to achieve this task in TypeScript:Table of Content Using the blur() methodSetti 3 min read How to select all on focus in input using JQuery? The select() event is applied to an element using jQuery when the user makes a text selection inside an element or on focus the element. This event is limited to some fields. Syntax: $("selected element").select(); //Select all Input field on focus $("input").select(); //Select Input field on focus 1 min read How to force Input field to enter numbers only using JavaScript ? We are going to learn how can we force the Input field to enter numbers only using JavaScript. Below are the approaches to force input field force numbers using JavaScript:Table of ContentBy using ASCII ValueBy using replace(), isNan() functionBy using ASCII ValueIn this approach, we are going to us 3 min read How to get focused element using jQuery? To focus on element there is an inbuilt selector available in jQuery, which is used to detect the currently focused element. When the element is get focused by the mouse click or by the tab-navigating button this selector return the selected element. You can add the element in JQuery to focused that 2 min read Implement a JavaScript when an element loses focus Given a document, the task is to implement functionality when the element loses focus. We have 2 options, one is the onblur event and another is onfocusout event JavaScript. We're going to discuss a few methods. First few methods to understand. Approach 1: Using onblur event JavaScript onblur Event: 2 min read Set the focus to HTML form element using JavaScript To set focus to an HTML form element, there can be many methods that can be used to focus. In this article, we will discuss them all. These are the following approaches: Table of Content Using focus() methodUsing window.onload methodApproach 1: Using focus() methodIn this approach, we are going to u 2 min read Like