In this blog, you'll learn how to create an input field that shakes when an error occurs. We'll accomplish this using JavaScript. We can say we're going to validate the input field with JavaScript. If the input field doesn't meet the conditions, we'll show an error message and shake the input field for a while.
Here's how it works:
We're going to create a simple form with a single input field and a submit button.
When the user clicks the submit button and the input field doesn't meet the specified criteria (e.g., it's empty, contains only spaces, etc.), an error message will appear, and the input field will shake briefly to indicate the error.
Shake Input Field On Error During (Form Validation.)
File structure:
- Create one folder
- Open it in your code editor
- Create two files with name index.html and index.css
I’ve used JavaScript which I've integrated with the HTML file.
Let's create a shaking animation of the input field while showing the error.
Step 1: Create basic structure.
Create one form with one input field and submit button using HTML and CSS.
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 Shake 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="username" placeholder="Username" required>
</div>
<p class="error_message"></p>
<button type="button" class="submit_button">Submit</button>
</form>
</div>
</body>
</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);
}
Step 2: Create the shaking animation using CSS keyframes.
Now lets create the shaking animation with CSS keyframes and add it inside the separate class with name active.
CSS
.active {
position: relative;
border-color: red;
animation-name: shake;
animation-duration: 0.2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes shake {
0% {
left: -5px;
}
25% {
left: 5px;
}
50% {
left: -5px;
}
75% {
left: 5px;
}
100% {
left: -5px;
}
}
So we made the shaking animation using CSS keyframes and added it inside a new separately created class with its active class.
Now when we add this class inside the input field. The input field starts shaking.
We are going to add this class in the input field using JavaScript according to conditions. Means if the input field is empty, contains characters other than alphabets etc..
Step 3: Add functionality to shake the input field if error occurs.
We’ll set condition to input field that:
- It should not be empty. However we added the required attribute inside the input tag, but it should be validated at the front end as well as at the back end too.
- It should not contain characters other than the alphabet (a-z), dot and spaces.
If the above condition is not fulfilled. Then we shake the input field by adding the active class (in which shaking animation is stored) to show error to the user and show the error message accordingly to show the user what is the actual error.
If the above condition meets, Then we simply submit the form.
JavaScript
let form = document.querySelector("form");
let username = document.querySelector(".username");
let error_message = document.querySelector(".error_message");
let submit_button = document.querySelector(".submit_button");
// Function to shake the input field for one second.
function shake() {
username.classList.add("active");
setTimeout(() => {
username.classList.remove("active");
}, 1000);
}
submit_button.addEventListener("click", check_input_field);
function check_input_field() {
error_message.innerHTML = "";
// Shake input field and show the error message if input field is empty.
if (username.value === "" && username.value.trim().length === 0) {
shake();
error_message.innerHTML = "Username cannot be blank.";
}
// Shake input field and show the error message if input field contains the characters other than alphabets, dots and spaces.
if (username.value.match(/[^\s\.A-Za-z]/g)) {
shake();
error_message.innerHTML = "Enter alphabets only.";
}
// Submit form if error_message innerHTML is empty. Means their is no error.
if (error_message.innerHTML === "" && error_message.innerHTML.length == 0) {
form.submit();
}
}
Output:
So that's how you can validate the input field using JavaScript and show the error message along with shaking animation to the input field, if error occurs according to conditions set. If you have any questions or suggestions, feel free to write them in the comment section.
Share your thoughts.