Hello coders !!
When it comes to web applications, form validation is a important component that ensures user inputs are accurate and secure. Without proper validation, you might end up with corrupted data, usability issues, or even security vulnerabilities. Luckily, JavaScript makes it easy to implement robust validation mechanisms to enhance user experience. In this post, we’ll explore the fundamentals of form validation in JavaScript — including methods, best practices, and some creative ways to make your forms shine.
Why Is Form Validation Important?
Before diving into the code, it’s essential to understand why form validation matters. Here are a few compelling reasons:
1. Data Integrity : Validate inputs to ensure you’re collecting accurate and useful data. This not only helps maintain the quality of your database but also improves analytics and reporting.
2. User Experience: A well-validated form provides immediate feedback, guiding users in real-time, which can enhance overall engagement and satisfaction.
3. Security: Protect your application from malicious attacks such as SQL injection and cross-site scripting (XSS) by validating user input before it reaches the server.
4. Cost-Effectiveness : Catching errors during the input stage prevents time-consuming fixes later on, allowing your developers to use their resources more effectively.
Getting Started with Basic Validation
JavaScript provides several ways to validate form inputs, but starting with the basics is essential. Here’s a straightforward example of how to validate a simple form with a name and email field.
HTML Structure
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<script defer src="./index.js"></script>
</head>
<body>
<div class="container">
<form id="form" action="/">
<h1>Registration</h1>
<div class="input-control">
<label for="username">Username</label>
<input id="username" name="username" type="text">
<div class="error"></div>
</div>
<div class="input-control">
<label for="email">Email</label>
<input id="email" name="email" type="text">
<div class="error"></div>
</div>
<div class="input-control">
<label for="password">Password</label>
<input id="password"name="password" type="password">
<div class="error"></div>
</div>
<div class="input-control">
<label for="password2">Password again</label>
<input id="password2"name="password2" type="password">
<div class="error"></div>
</div>
<button type="submit">Sign Up</button>
</form>
</div>
</body>
</html>
JavaScript Validation
const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
form.addEventListener('submit', e => {
e.preventDefault();
validateInputs();
});
const setError = (element, message) => {
const inputControl = element.parentElement;
const errorDisplay = inputControl.querySelector('.error');
errorDisplay.innerText = message;
inputControl.classList.add('error');
inputControl.classList.remove('success')
}
const setSuccess = element => {
const inputControl = element.parentElement;
const errorDisplay = inputControl.querySelector('.error');
errorDisplay.innerText = '';
inputControl.classList.add('success');
inputControl.classList.remove('error');
};
const isValidEmail = email => {
const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
const validateInputs = () => {
const usernameValue = username.value.trim();
const emailValue = email.value.trim();
const passwordValue = password.value.trim();
const password2Value = password2.value.trim();
if(usernameValue === '') {
setError(username, 'Username is required');
} else {
setSuccess(username);
}
if(emailValue === '') {
setError(email, 'Email is required');
} else if (!isValidEmail(emailValue)) {
setError(email, 'Provide a valid email address');
} else {
setSuccess(email);
}
if(passwordValue === '') {
setError(password, 'Password is required');
} else if (passwordValue.length < 8 ) {
setError(password, 'Password must be at least 8 character.')
} else {
setSuccess(password);
}
if(password2Value === '') {
setError(password2, 'Please confirm your password');
} else if (password2Value !== passwordValue) {
setError(password2, "Passwords doesn't match");
} else {
setSuccess(password2);
}
};
CSS Structure
body {
background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
font-family: 'Poppins', sans-serif;
}
#form {
width: 300px;
margin: 20vh auto 0 auto;
padding: 20px;
background-color: whitesmoke;
border-radius: 4px;
font-size: 12px;
}
#form h1 {
color: #0f2027;
text-align: center;
}
#form button {
padding: 10px;
margin-top: 10px;
width: 100%;
color: white;
background-color: rgb(41, 57, 194);
border: none;
border-radius: 4px;
}
.input-control {
display: flex;
flex-direction: column;
}
.input-control input {
border: 2px solid #f0f0f0;
border-radius: 4px;
display: block;
font-size: 12px;
padding: 10px;
width: 100%;
}
.input-control input:focus {
outline: 0;
}
.input-control.success input {
border-color: #09c372;
}
.input-control.error input {
border-color: #ff3860;
}
.input-control .error {
color: #ff3860;
font-size: 9px;
height: 13px;
}
Output Screen
Conclusion
Hope you liked my post !!
Form validation is an essential aspect of user experience and data integrity on the web. By leveraging JavaScript’s capabilities, you can create efficient, user-friendly forms that both guide users and protect your application. Remember, validation isn’t just about enforcing rules; it’s about creating a seamless interaction that leaves users feeling confident and secure. Whether you are a seasoned developer or just starting your journey in web development, mastering form validation with JavaScript will elevate your skills and enhance your projects. So, get out there, validate those forms, and watch your user interactions improve dramatically! If you have any tips or questions about form validation, feel free to share your thoughts in the comments below! Happy coding!