Table of Contents
Form validator javascript | form validator using html css javascript
Welcome🎉 to Code With Random blog. In this blog, we learn that how we how to create a Form validator. We use HTML & CSS and javascript for this Form validator. Hope you enjoy our blog so let’s start with a basic HTML structure for a Form validator javascript.
HTML code for Form validator
<body>
<div class="container">
<h1>Register With Us</h1>
<form action="" id="form" class="form">
<div class="input">
<label for="username">Username</label>
<input
type="text"
name="username"
id="username"
placeholder="Username"
autocomplete="off"
/>
<small>Error message</small>
</div>
<div class="input">
<label for="email">Email</label>
<input
type="text"
name="email"
id="email"
placeholder="Email"
autocomplete="off"
/>
<small>Error message</small>
</div>
<div class="input">
<label for="password">Password</label>
<input
type="password"
name="password"
id="password"
placeholder="Password"
/>
<small>Error message</small>
</div>
<div class="input">
<label for="c-password">Confirmer Password</label>
<input
type="password"
name="c-password"
id="c-password"
placeholder="Confirmer Password"
/>
<small>Error message</small>
</div>
<button>Submit</button>
</form>
</div>
</body>
There is all HTML code for the Form validator. Now, you can see output without CSS, then we write CSS for our Form validator.
output
CSS Code for Form validator
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
body {
background-color: #f9fafb;
font-family: "Open Sans", sans-serif;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
width: 400px;
padding: 30px 40px;
}
.container h1 {
text-align: center;
margin: 0 0 20px;
font-size: 24px;
}
.input {
margin-bottom: 20px;
position: relative;
}
.input label {
display: block;
margin-bottom: 10px;
}
.input input {
width: 100%;
height: 40px;
padding: 0 15px;
background-color: transparent;
border: 2px solid #f0f0f0;
border-radius: 5px;
}
.input small {
display: block;
color: #e74c3c;
font-weight: bold;
font-size: 11px;
padding-top: 3px;
visibility: hidden;
}
.input.success input {
border: 2px solid #2ecc71;
}
.input.error input {
border: 2px solid #e74c3c;
}
.input.error small {
visibility: visible;
}
button {
width: 100%;
height: 40px;
line-height: 40px;
background-color: #3498db;
border: 1px solid #3498db;
border-radius: 5px;
cursor: pointer;
color: #fff;
display: block;
font-size: 16px;
}
Now we have completed our CSS section, Here is our updated output CSS.
output
Now add javascript for the form validation!
Javascript code for form validation
const form = document.getElementById("form");
const username = document.getElementById("username");
const email = document.getElementById("email");
const password = document.getElementById("password");
const cPassword = document.getElementById("c-password");
//Show Error Message
function showError(input, message) {
const formControl = input.parentElement;
formControl.className = "input error";
const small = formControl.querySelector("small");
small.innerText = message;
}
//Show Success message
function showSuccess(input) {
const formControl = input.parentElement;
formControl.classList.add("success");
}
//Check Required fields
function checkRequired(inputArr) {
inputArr.forEach(function (input) {
if (input.value.trim() === "") {
showError(input, `${getFieldName(input)} is required`);
} else {
showSuccess(input);
}
});
}
// Get Field Name
function getFieldName(input) {
return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}
// Check Input Lenght
function checkLenghth(input, min, max) {
if (input.value.length < min) {
showError(
input,
`${getFieldName(input)} must be at least ${min} characters `
);
} else if (input.value.length > max) {
showError(
input,
`${getFieldName(input)} must be less than ${max} characters `
);
} else {
showSuccess(input);
}
}
// Check E-mail Is Valid
function checkEmail(input) {
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,}))$/;
if (re.test(input.value.trim())) {
showSuccess(input);
} else {
showError(input, "E-mail is not Valid");
}
}
// Check Password Match
function checkPasswordMatch(input1, input2) {
if (input1.value !== input2.value) {
showError(input2, "Passwords do not match");
}
}
form.addEventListener("submit", (e) => {
e.preventDefault();
checkRequired([username, email, password, cPassword]);
checkLenghth(username, 3, 15);
checkLenghth(password, 8, 25);
checkEmail(email);
checkPasswordMatch(password, cPassword);
});
Final output
Now we have completed our javascript section, Here is our updated output with javascript. Hope you like Form validator javascript. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕
Check out more…..
In this post, we learn how to create a form validator using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.