This guide will demonstrate how to check if an input field is empty or not upon clicking a button.
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);
}
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 ("").
Check If Input Field Empty or Not Excluding Spaces.
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:
- How to clear or empty input on click using JavaScript.
- How to disable input field using JavaScript.
- How to change the text case (uppercase and lowercase) on click using JavaScript.
- How to get the value of input field using JavaScript.
- Make input field to replace multiple spaces between words to single space on input using JavaScript.
Share your thoughts.