June 17, 2020

How to Check If Input Box is Empty in Javascript

By Krishnaa JavaScript Questions 0 Comments

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, and h1). The div element is just a wrapper for the rest of the elements.
The button element has “Check” and the h1 element has “Result” as innerText.

We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script 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, and h1 element using the document.querySelector() method and stored them in the btnCheck, input, and result variables respectively.
We have attached a click event listener to the button element.
In the event handler function, we are getting the value from the input field using the value property and calling the trim() method to get rid of white spaces. The final string is stored in the value 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 the h1 element using the innerText 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';
});

You May Also Like: