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. It is part of client side form validation to make sure that user should not be able to submit form if it has empty fields. There could be another scenarios where you want to check for the same. It is done to avoid inconsistency in data stored in database.

It is extremely easy to verify if input field is empty or not. The only thing which you have to make sure is that you should use trim() method first and then do the comparison for length. Please have a look over HTML, CSS and Javascript code given below.

HTML:

<!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>

CSS:

body {
    text-align: center;
}

input, button {
    display: inline-block;
    padding: 10px 20px;
}

div {
    display: inline-block;
}

Javascript:

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: