How to Check If Input Box is Empty in Javascript
In this tutorial, you will learn how to check if input box is empty in javascript. As a web developer, it is our responsibility to make sure that all the mandatory fields are filled by the user before submitting the form. Submitting a form with blank fields can create inconsistency in our database.
Form validation is generally done on the client-side, but to make our database more secure, we can also implement validation on the server-side.
It is extremely easy to verify if an input field is empty or not. An input element has a value
property that returns the value present in the input field. The value is of type string and we can make use of the length
property to get its length. If the length is 0, that means input field is empty.
White spaces are also considered as a valid value and that is why we should use the trim()
method first and then check for length.
In the following example, we will enter a random value in the input field. Upon click of a button, we will check whether the value is empty or not. Please have a look over the code example and the steps given below.
HTML & CSS
- We have 4 elements in the HTML file (
div
,input
,button
, andh1
). Thediv
element is just a wrapper for the rest of the elements. - The
button
element has“Check”
and theh1
element has“Result”
asinnerText
. - We have done some basic styling using CSS and added the link to our
style.css
stylesheet inside thehead
element. - We have also included our javascript file
script.js
with ascript
tag at the bottom.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div> <input type="text"> <button>Check</button> <h1>Result</h1> </div> <script src="script.js"></script> </body> </html>
body { text-align: center; } input, button { display: inline-block; padding: 10px 20px; } div { display: inline-block; }
Javascript
- We have selected the
button
element,input
element, andh1
element using thedocument.querySelector()
method and stored them in thebtnCheck
,input
, andresult
variables respectively. - We have attached a
click
event listener to thebutton
element. - In the event handler function, we are getting the value from the input field using the
value
property and calling thetrim()
method to get rid of white spaces. The final string is stored in thevalue
variable. - We are using the
length
property to get the length of the string. - We are using the
if
statement to check whether the length is equal to 0. Depending upon the result of the check, we will display“Empty”
or“Not Empty”
in theh1
element using theinnerText
property.
let btnCheck = document.querySelector('button'); let input = document.querySelector('input'); let result = document.querySelector('h1'); btnCheck.addEventListener('click', () => { let value = input.value.trim(); result.innerText = value.length == 0 ? 'Empty' : 'Not Empty'; });