Hello developers, today in this blog, you'll learn how to create Registration Form Validation using HTML, CSS & JavaScript.
A Form Validation is a technical process where a web form checks if the information provided by a user is correct. The form will either alert the user that they missed something and need to fix something to proceed, or the form will be validated and the user will be able to continue with their registration process.
Form Validation means to check that the user's entered credential - Name, Email, Password is valid and correct or not. User will not get access to the restricted page until they user entered a valid email and password.
In this blog (Registration Form Validation), as you see on the webpage, there is a registration form that contains Name, Email, Password, Confirm Password and Register Button. At first, the errors are not shown but when the user clicks on the register button without entering Name, Email, Password, and Confirm Password then the errors will appear.
JavaScript code is used to validate the form. The email and password must be entered based on the condition else an error will be shown. The Confirm Password should match with the Password that you entered else the password does not match error will be thrown.
If the field is filled correctly, the tick icon with the green color bottom line will appear. If the form is not filled correctly, the cross icon with the red color bottom line will appear.
The source code of this Registration Form Validation using HTML, CSS & JavaScript is given below, if you want the source code of this program, you can copy it. You can use this code of Registration Form Validation with your creativity and can take this card to the next level.
Registration Form Validation using HTML, CSS & JavaScript [Source Code]
To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,500&display=swap');
* {
box-sizing: border-box;
}
body {
margin: 0;
padding-bottom: 20px;
font-family: 'Nunito', sans-serif;
color: white;
background-image: linear-gradient(270deg, #08AEEA 0%, #2AF598 100%);
}
.wrapper{
background-color: #202124;
position: relative;
width:30%;
margin: 50px auto;
padding: 20px;
border-radius: 10px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.header {
position: relative;
text-align: center;
}
.header h2 {
color: #fff;
}
.form {
margin: 0 auto;
max-width: 16rem;
overflow: auto;
}
.form-control {
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}
.form-control input {
border: 1px solid transparent;
border-bottom-color: white;
background-color: transparent;
color: white;
border-radius: 0;
font-family: inherit;
font-size: 14px;
padding: 10px;
width: 100%;
}
.form-control input:focus {
outline: 0;
border-bottom-color: #777;
}
.form-control.success input {
border-bottom-color: #2ecc71;
}
.form-control.error input {
border-bottom-color: #e74c3c;
}
.form-control i {
visibility: hidden;
position: absolute;
top: 40px;
right: 10px;
}
.form-control.success i.fa-check-circle {
color: #2ecc71;
visibility: visible;
}
.form-control.error i.fa-times-circle {
color: #e74c3c;
visibility: visible;
}
.form-control small {
color: #e74c3c;
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
}
.form-control.error small {
visibility: visible;
}
.form button {
background-image: linear-gradient(270deg, #08AEEA 0%, #2AF598 100%);
border-radius: 15px;
color: #000;
font-size: 1rem;
padding: 10px;
margin-top: 20px;
width: 100%;
}
.form-control button:focus {
outline: 0;
border-bottom-color: #777;
}
.credit{
text-align: center;
color: #000;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color:#000;
font-weight: bold;
}
const form = document.getElementById('form');
const name = document.getElementById('name');
const email = document.getElementById('email');
const password = document.getElementById('password');
const confirm = document.getElementById('confirm');
form.addEventListener('submit', e => {
e.preventDefault();
checkInputs();
});
function checkInputs() {
// trim to remove the whitespaces
const nameValue = name.value.trim();
const emailValue = email.value.trim();
const passwordValue = password.value.trim();
const confirmValue = confirm.value.trim();
if (nameValue === '') {
setErrorFor(name, 'Please enter your name');
} else {
setSuccessFor(name);
}
if (emailValue === '') {
setErrorFor(email, 'Please enter your email');
} else if (!isEmail(emailValue)) {
setErrorFor(email, 'Email not valid');
} else {
setSuccessFor(email);
}
if (passwordValue === '') {
setErrorFor(password, 'Please enter password');
} else if (!isPassword(passwordValue)) {
setErrorFor(password, 'atleast one number, one uppercase, lowercase letter, and atleast 8 character');
}else {
setSuccessFor(password);
}
if (confirmValue === '') {
setErrorFor(confirm, 'Please re-enter password');
} else if (!isConfirm(confirmValue)) {
setErrorFor(confirm, 'Invalid password');
}else if (passwordValue !== confirmValue) {
setErrorFor(confirm, 'Passwords does not match');
} else {
setSuccessFor(confirm);
}
}
function setErrorFor(input, message) {
const formControl = input.parentElement;
const small = formControl.querySelector('small');
formControl.className = 'form-control error';
small.innerText = message;
}
function setSuccessFor(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
}
function isEmail(email) {
return /^(([^<>()\[\]\\.,;:\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,}))$/.test(email);
}
function isPassword(password){
return /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/.test(password);
}
function isConfirm(confirm){
return /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/.test(password);
}
Thank you for reading our blog. If you face any problem in creating this Registration Form Validation using HTML, CSS & JavaScript then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
إرسال تعليق
Thank you
Learning robo team