Form Validation Using HTML, CSS, and JavaScript
Hello Coder! Welcome to the Codewithrandom Blog. In this blog, we learn how to create a program for form validation using HTML and Javascript. We validate passwords and confirm passwords, and email addresses using JavaScript.
A form validator in JavaScript is a program that sets some of the rules for the form input, and the user must follow all the rules to submit the form. These rules are set on the form to create a website, which only allows valid and verified data. This validator is usually added to the website so that the user can send the correct data to the server at once. If we do not add a validation process there are high chances of sending invalid data to the server, and then the server will reject the data, and this process will take a lot of time.
Before we learn more about Form Validation using Javascript we need to understand some of the basic concepts of form validation
What is a form Validation?
Form validation is the process of checking that the data is correctly entered inside the form using a set of rules. In this process, developers use javascript to add some rules inside the form, and as the user enters some text inside the form, the set of rules inside the application will check whether the entered text follows the defined rule or not.
What are the types of Form Validation?
Form validation is of two types:
- Client-side Validation: In client-side validation, the developer sets some of the rules inside the browser that cross-verify the data on the client side only. This is called client-side validation.
- Server-side Validation: In server-side validation, the data is checked on the server side to see if the entered data is true or not. This is called server-side validation.
I hope you will enjoy our blog, so let’s start with a Basic HTML structure for form validation.
Preview of the project
| Project Name | Form Validator |
| Code By & Written By | Code With Random/Anki |
| Project Download | Copy Code From Given Code Snippets And Codepen Embed |
| Language Used | HTML, CSS, And JavaScript |
| External Link / Dependencies | No |
| Responsive | Yes |
50+ HTML, CSS & JavaScript Projects With Source Code
How to make form validation using HTML, CSS, and JavaScript?
HTML Code:-
- In the HTML code, we have a parent div, which has the class name “Container“. Under this div, we have a heading with an H1 tag, and we have a form element to create the form. This form has an ID and class name with the same name “Form”.
- In the form element, we have input elements for username, email, password, and confirm password. We give a unique ID name to every input.
- Also, we have a button element for submitting the form. Copy all the HTML code and paste it into your HTML file.
Restaurant Website Using HTML And CSS With Source Code
<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 the HTML code for the project. Now, you can see output without CSS or JavaScript. Then we write CSS for the style form element, design it, and use JavaScript for password validation and email validation.
ADVERTISEMENT
Read also: Portfolio Website using HTML and CSS (Source Code)
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
Html Code Output:-
CSS Code For Form Validator:-
- In this CSS, we style all the elements and give them proper padding, color, margin, and better looks. Also, we have imported the Google font in CSS.
- Copy all the CSS code and paste it into your CSS file.
@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;
}Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
Now we have completed our CSS code For Form Styling.
Html + Css Code Output:-
Age Calculator Using HTML, CSS and JavaScript
Now add JavaScript code and give validation in the form.
JavaScript Code For Form Validator:-
- In the JavaScript code, we have created a function and logic to create validation functionality in the form. We get all the inputs as const variables, create logic on these inputs, and then click the submit button.
- Basically, we use the if, else statement in Javascript for checking conditions.
- Alright, now just look at the javascript code and paste it into your javascript file.
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);
});Now we have completed our code for form validation, Now time to see the Final Output!
Final Output Of Form Validation Using HTML CSS and Javascript:-
Read also:
Weather App Using Html,Css And JavaScript
Now We Have Completed Our Form Validation Using HTML CSS and Javascript. Hope You Like Form Validation. You Can See The Output Video And Project Screenshots. See Our Other Blogs And Gain Knowledge In Front-End Development.
Thank You!
In This Post, We Learn How To Create a Form Validation Using HTML, CSS, And JavaScript. If We Made A Mistake Or Any Confusion, Please Drop A Comment To Reply Or Help You In Easy Learning.
Written By – Code With Random/Anki
How to make form validation using HTML, CSS, and JavaScript?
In the HTML code, we have a parent div, which has the class name “Container“. Under this div, we have a heading with an H1 tag, and we have a form element to create the form. This form has an ID and class name with the same name “Form”.
In the form element, we have input elements for username, email, password, and confirm password. We give a unique ID name to every input.
What is a form Validation?
Form validation is the process of checking that the data is correctly entered inside the form using a set of rules. In this process, developers use JavaScript to add some rules inside the form, and as the user enters some text inside the form, the set of rules inside the application will check whether the entered text follows the defined rule or not.
What are the types of Form Validation?
Form validation is of two types:
Client-side Validation: In client-side validation, the developer sets some of the rules inside the browser that cross-verify the data on the client side only. This is called client-side validation.
Server-side Validation: In server-side validation, the data is checked on the server side to see if the entered data is true or not. This is called server-side validation.
