In this blog post we’ll see how you can make input fields that blink on error. Or you can say it blinks when the conditions set to the input field are not met. We’ll make it by using HTML, CSS and JavaScript. The blinking animation is created with CSS keyframes.
JavaScript properties and Method Used:
setTimeout()
Add
remove
Classlist
Description:
There is one input field and one button.
When the user clicks on the button and if the input field has no value in it. Then the input field starts blinking for one second.
Make Input Field Blink On Error.
How are we going to make an input field with blink animation ?.
- First we’ll make an input field and button (design).
- Then we create a separate class with the name active. In which we’ll add the blinking animation created with CSS keyframe.
- Now with JavaScript we’ll check if the input field is empty or not on a click of button (submit button). If the input field is empty we’ll add an active class (which contains the animation) to the input field. Making the input field blink.
- Then after one second we remove that active class to stop the animation on the input field using setTimeout method.
File structure:
- Create on folder
- Open it in your code editor
- Create two files in that folder with name index.html and index.css
I’ve integrated JavaScript within the HTML file.
Let's create the input field which has a functionality to blink on error in it.
Step 1: Create the basic structure for input field error animation.
First we going to create the basic design like adding input field, button etc.
Also read: Rotate border of button with animation on hover and pause the rotation on hover out.
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>Make Input Field Blink On Error. | Maketechstuff.com</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<form action="#">
<div class="input_box">
<input type="text" class="input" placeholder="Username">
</div>
<button type="submit" class="submit_button">Submit</button>
</form>
</div>
</body>
<script>
</script>
</html>CSS
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100vh;
background-color: blue;
position: relative;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 450px;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 2px 10px -5px #000;
text-align: center;
}
.input_box{
width: 100%;
position: relative;
display: flex;
}
input{
width: 100%;
font-size: 25px;
padding: 8px 10px;
outline: none;
}
button{
font-size: 25px;
padding: 8px 20px;
margin-top: 15px;
border: none;
border-radius: 3px;
background-color: blue;
color: #fff;
cursor: pointer;
transition: 0.3s;
}
button:active{
transform: scale(0.9);
}
Output:
After creating the design. Let's create the animation and add it inside the separate class.
Step 2: Creating the blinking animation.
We’ll create the animation using CSS keyframes. I’ve used the box-shadow property to create the blink effects. You can use other css properties like you can blink the border of the input field.
After creating the animation we’ll add the animation inside the class active (which is separately created for animation).
Also read: Add blinking animation to text using HTML and CSS.
CSS
.active{
animation-name: blink;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes blink {
0%{
box-shadow: 0px 3px 1px 4px red;
}
25%{
box-shadow: none;
}
50%{
box-shadow: 0px 3px 1px 4px red;
}
75%{
box-shadow: none;
}
100%{
box-shadow: 0px 3px 1px 4px red;
}
}Now as the animation is created. Now when we add this active class inside the input field the input field starts to blink.
We’ll add this active class inside the input field with JavaScript. After checking if the input field is empty or not.
Step 3: Start animation if input field is empty.
We are going to add one simple condition to the input field. That it should not be empty. If empty then we indicate the user with blinking animation that something went wrong.
we are going to check if the input field is empty or not. If the input field is empty we’ll add the active class (contains the blinking animation) inside the input field.
After adding the active class. We’ll remove it after 1 second with the setTimeout method.
JavaScript
let input = document.querySelector(".input");
let submit_button = document.querySelector(".submit_button");
submit_button.addEventListener("click", check_input_field);
function check_input_field() {
if (input.value === "" && input.value.length === 0) {
input.classList.add("active");
setTimeout(() => {
input.classList.remove("active");
}, 1000);
}
}Output:
So as you can see in the output that when the input field is empty and clicks on the submit button, the input field starts blinking and stops after a second.
Here, In this input field when user add one space as a value. It consider it as a value and don't blink animation. In that case first you need to trim the value of input field and then check for empty or not.
Also read: Check if input field empty or not excluding spaces.
But here I’ve just added the animation. You should add the error message too. To tell the user what the actual error is for.
So let's show the error message to the user.
We made a simple changes:
- Add p tag to show the message.
- Add functionality to p tag to display error message only when input field is empty.
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>Make Input Field Blink On Error. | Maketechstuff.com</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<form action="#">
<div class="input_box">
<input type="text" class="input" placeholder="Username">
</div>
<p class="error_message"></p>
<button type="submit" class="submit_button">Submit</button>
</form>
</div>
</body>
</html> JavaScript
let input = document.querySelector(".input");
let submit_button = document.querySelector(".submit_button");
let error_message = document.querySelector(".error_message");
submit_button.addEventListener("click", check_input_field);
function check_input_field() {
if (input.value === "" && input.value.length === 0) {
input.classList.add("active");
error_message.innerHTML = "Input field cannot be blank.";
setTimeout(() => {
input.classList.remove("active");
}, 1000);
}
else{
error_message.innerHTML = "";
}
}
Output:
Here, While clicking the submit button the form will be submitted even if input field is empty. You can simply submit the form using JavaScript after checking input field. Or you can simply add required attribute to input field.
Here I've just shown you how you can make input field blink while showing the error.
So that’s how you can make the input field with blinking animation. And show this animation on error or show animation based on condition set to input field. If you have any query or suggestions. Feel free to write them in the comment section.
You may like:
- Animate the input field on focus using HTML and CSS.
- Highlight the inupt field on focus using HTML, CSS and JavaScript.
- Check input field empty or not using JavaScript.
- Float up placeholder of input field on focus using HTML and CSS.
- How to make input field to accepy only single space.
- Allow only numeric values in input field using JavaScript.
- Limit the number of input character in textarea using JavaScript.
Share your thoughts.