Today In this article you will learn how to create an JavaScript Form Validation using HTML CSS and JavaScript only. This type of Form Validation is used on the websites for Form submision.
You easily create JavaScript Form Validation Using HTML CSS and javaScript then this article will definitely help you. For this, you need to have an idea about basic HTML CSS, and javaScript then you can understand the following codes. It is designed in a completely modern way.
Some information about this Javascript Form Validation
Earlier I designed a simple form where I used only HTML and CSS. As you can see in the picture above, show simple registration form. There is show input field with submit button. You have to field right details otherwise you click the submit button then show error. Now, you have to field right details then click the submit button. succsfully done.
Watch the video tutorial to create Javascript Form Validation
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made this Javascript Form Validation step by step completely beautifully. So you can learn how to make these Javascript Form Validation. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this Javascript Form Validation Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- Glassmorphism 3D Flip Card UI Design Using HTML and CSS
- Animated Profile Card Design Using HTML CSS and Javascript
- How To Create Accordion Menu using HTML & CSS
Javascript Form Validation | Source Codes
You have to create HTML, CSS & JS File For this menu. After creating these files just paste the following codes into your file.
The First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension. You’ve to download files from the given download button to use images also.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animated Profile Card</title>
<!--Fontaweom Link-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!----CSS link----->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form id="form" class="form">
<h2>Register with us</h2>
<div class="form-control">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Enter username">
<small>Error message</small>
</div>
<div class="form-control">
<label for="email">Email</label>
<input type="text" id="email" placeholder="Enter email">
<small>Error message</small>
</div>
<div class="form-control">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter password">
<small>Error message</small>
</div>
<div class="form-control">
<label for="password2">Confirm Password</label>
<input type="password" id="password2" placeholder="Enter password again">
<small>Error message</small>
</div>
<button>Submit</button>
</form>
</div>
<!----Js CDN Link---->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!---Custom File Link--->
<script type="text/javascript" src="js.js"></script>
</body>
</html>Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
:root {
--success-color:#2ecc71;
--error-color:#e74c3c;
}
* {
box-sizing: border-box;
}
body {
background-color:#f9fafb;
font-family: 'Raleway', sans-serif;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
min-height: 100vh;
}
.container {
background-color: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
border-radius: 5px;
width: 400px;
}
h2 {
text-align: center;
margin: 0 0 20px;
}
.form {
padding: 30px 40px;
}
.form-control {
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}
.form-control label {
display: block;
color: rgb(119, 119, 119);
margin-bottom: 10px;
}
.form-control input {
border: 2px solid #f0f0f0;
border-radius: 4px;
display: block;
width: 100%;
padding: 10px;
font-size: 14px;
}
.form-control input:focus {
outline: 0;
color:#777;
}
.form-control.success input {
border-color:var(--success-color);
}
.form-control.error input {
border-color:var(--error-color);
}
.form-control small {
color: var(--error-color);
position: absolute;
left: 0;
bottom: 0;
visibility: hidden;
}
.form-control.error small {
visibility: visible;
}
.form button {
cursor: pointer;
background-color: #32BBFF;
border: 2px solid #32BBFF;
display: block;
padding: 10px;
width: 100%;
font-size: 14px;
border-radius: 4px;
color:#fff;
transition: all 1s ease-in-out;
}
.form button:hover {
background-color: transparent;
border: 2px solid aquamarine;
color: aquamarine;
transition: all 1s ease-in-out;
}
.form button:focus {
outline: none;
}third Step, you have to create a JS file with the name of js.js and paste the given codes in your js file. Remember, you’ve to create a file with .js extension.
JS Code:
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');
//show input error message
function showError(input,message){
const formControl = input.parentElement;
formControl.className = 'form-control error';
const small = formControl.querySelector('small');
small.innerText = message;
}
//show input success message
function showSuccess(input){
const formControl = input.parentElement;
formControl.className = 'form-control success';
}
// check require field
function checkRequire(inputArr){
inputArr.forEach(function(input){
if(input.value.trim() === ''){
showError(input, `${getFieldName(input)} is Require`);
}
else {
showSuccess(input);
}
});
}
// Get FieldName
function getFieldName(input){
return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}
// check email validation
function checkEmail(input){
const re = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[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, 'Email is not valid');
}
}
// check input length
function checkLength(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 ${mix} characters` );
}
else {
showSuccess(input);
}
}
//check password match
function checkPasswordMatch(input1, input2){
if(input1.value !== input2.value){
showError(input2, 'Password do no match');
}
}
//Even eventlistener
form.addEventListener('submit', function(e){
e.preventDefault();
checkRequire([username, email, password, password2]);
checkLength(username,4,10);
checkLength(password,6,25);
checkEmail(email);
checkPasswordMatch(password , password2);
});
now you’ve successfully created this Javascript Form Validation using HTML, CSS, and Javascript. If your code does not work or facing any error/problem to comment down or contact us through the contact page. otherwise, you can download all source code with image.
