Check Input Field Empty or Not Using JavaScript.

0

This guide will demonstrate how to check if an input field is empty or not upon clicking a button.


check if input field is empty or not


Checking the Input Field Empty or Not.

Checking if an input field is empty or not is straightforward using JavaScript. Here's a common approach within a conditional statement:


Input.value.length === 0

Input.value === ""


We'll begin by building the basic structure using HTML and CSS. We'll create an input field, a button, and a div tag to display a message indicating whether the input field is empty or not.


Also read: Create an animated input field using HTML and CSS. Animate the input field on focus.

Also read: CSS button hover effects.


HTML


<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Check Input Field Is Empty Or Not | Maketechstuff.com</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>

    <div class="container">
        <h2>Maketechstuff.com</h2>
        <input type="text" class="input">
        <div class="output"></div>

        <button type="button" class="button">Check</button>
    </div>

</body>

</html>
  

CSS


*{
    padding: 0px;
    margin: 0px;
}
body{
    width: 100%;
    height: 100vh;
    background-color: #7E57C2;
    position: relative;
}

.container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    width: 400px;
    background-color: #fff;
    padding: 15px 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 3px 25px -10px #000;

}
h2{
    font-size: 30px;
    margin-bottom: 40px;
}
input{
    font-size: 25px;
    padding: 10px;
    border: 2px solid #000;
}
.output{
    font-size: 25px;
    margin: 10px 0px;
}

button{
    width: 100%;
    background-color: #7E57C2;
    color: #fff;
    font-size: 25px;
    font-weight: bold;
    padding: 10px;
    margin: 20px 0px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.2s;
}
button:active{
    transform: scale(0.95);
}
  

Output:


check if input field is empty or not



Let’s add JavaScript to check if the input field is empty or not upon a button click.


We’ll see two ways.


1. Using length property.


JavaScript


    let input_field = document.querySelector(".input");
    let output = document.querySelector(".output");
    let button = document.querySelector(".button");

    button.addEventListener("click", check_input_field)
  

JavaScript


    function check_input_field() {
        if (input_field.value.length === 0) {
            output.innerHTML = 'Input field is empty';
        } else {
            output.innerHTML = 'Input field is<b>' + ' not ' + '</b>empty';

        }
    }
  


2. Using "" .


JavaScript


    function check_input_field() {
        if (input_field.value === "") {
            output.innerHTML = 'Input field is empty';
        } else {
            output.innerHTML = 'Input field is<b>' + ' not ' + '</b>empty';

        }
    }
  

Output:




As you saw in the video, blank spaces alone are considered values. To exclude them, you can first trim the value by trim() method of JavaScript and then check the input field's value with length property or by comparing it directly to an empty string ("").


Like this:


1. Using length property.


JavaScript


     function check_input_field() {
        let v = input_field.value.trim();
        if (v.length === 0) {
            output.innerHTML = 'Input field is empty';
        } else {
            output.innerHTML = 'Input field is<b>' + ' not ' + '</b>empty';

        }
    }
  


Or 


2. Using "" .


JavaScript


     function check_input_field() {
        let v = input_field.value.trim();
        if (v === "") {
            output.innerHTML = 'Input field is empty';
        } else {
            output.innerHTML = 'Input field is<b>' + ' not ' + '</b>empty';

        }
    }
  


Output:




So that’s how you can check if the input field value is empty or not using JavaScript. If you have any query or suggestions feel free to write in the comment section.


You may like:

  1. How to clear or empty input on click using JavaScript.
  2. How to disable input field using JavaScript.
  3. How to change the text case (uppercase and lowercase) on click using JavaScript.
  4. How to get the value of input field using JavaScript.

Tags

Post a Comment

0Comments
Post a Comment (0)
To Top