One way to approach it is by making a profile on a website! Interactive Registration Form allow the collection of user data and help create a personalized area or profile for users to carry out private tasks on their own without the help of a third party.
Form-based data collection is one thing, but how will the owner of the website determine whether or not the profiles on their site are trustworthy? Only legitimate users with correct information are used with JavaScript form validation techniques. This policy shields them from data leaks and helps in the prevention of false profiles. We’ll use JavaScript validation to develop an interactive form in this article.
Codepen Preview -
Registration Form Validate by Alex Golovanov on Codepen
Creating Interactive Registration Form Using HTML
<div class="container">
<h3>Signup</h3>
<form action="#">
<div class="field email-field">
<div class="input-field">
<input type="email" placeholder="Enter your email" class="email" />
</div>
<span class="error email-error">
<i class="bx bx-error-circle error-icon"></i>
<p class="error-text">Please enter a valid email</p>
</span>
</div>
<div class="field create-password">
<div class="input-field">
<input
type="password"
placeholder="Create Password"
class="password"
/>
<i class="bx bx-hide password-hide"></i>
</div>
<span class="error password-error">
<i class="bx bx-error-circle error-icon"></i>
<p class="error-text">
Please enter at least 8 character with number, symbol, small and
capital letter.
</p>
</span>
</div>
<div class="field confirm-password">
<div class="input-field">
<input
type="password"
placeholder="Confirm password"
class="confirpassword"
/>
<i class="bx bx-hide password-hide"></i>
</div>
<span class="error confirm-error">
<i class="bx bx-error-circle error-icon"></i>
<p class="error-text">Password don't match.</p>
</span>
</div>
<div class="field button-field input-field">
<input type="submit" value="Submit Now" />
</div>
</form>
</div>
Standard HTML tags are used in the form’s creation. Here, we’ve used the <div> tag to build the form’s main container. Inside the form tag, we’ve added the user name, email, password, and password confirmation as standard form components. We generate and insert these inputs into our Interactive Registration Form. The <input> tag of a specific type can be used to create these inputs, and it will create the basic structure.
HTML Output
Styling using CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #4070f4;
}
.container {
position: relative;
width: 100%;
max-width: 370px;
padding: 25px;
background-color: #fff;
border-radius: 8px;
}
.container h3 {
font-size: 22px;
font-weight: 600;
color: #333;
}
.container form {
margin-top: 30px;
}
form .field {
margin-bottom: 20px;
}
form .input-field {
position: relative;
width: 100%;
height: 55px;
}
.input-field input {
width: 100%;
height: 100%;
padding: 0 15px;
border: 1px solid #d1d1d1;
border-radius: 8px;
outline: none;
}
.invalid input {
border: 1px solid #d93025;
}
.input-field .password-hide {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
font-size: 18px;
color: #919191;
padding: 3px;
cursor: pointer;
}
.field .error {
display: flex;
align-items: center;
margin-top: 6px;
font-size: 14px;
font-weight: 400;
color: #d93025;
display: none;
}
.invalid .error {
display: flex;
}
.error .error-icon {
font-size: 15px;
margin-right: 6px;
}
.create-password .error {
align-items: flex-start;
}
.create-password .error-icon {
margin-top: 4px;
}
.button-field {
margin: 25px 0 6px;
}
.button-field input {
font-size: 16px;
font-weight: 400;
background-color: #4070f4;
color: #fff;
transition: all 0.3s;
cursor: pointer;
}
.button-field input:hover {
background-color: #0e4bf1;
}
A website’s style is important. We’ll style different Interactive Registration Form elements using class selectors. First, we’ll style our form pages with default styles using the universal selector (*). The font family, margin, and padding of the webpage will be specified.
Next, some font size and background color will be added to the webpage’s main body. We’ll use the background-color property to apply a solid background to our form page.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #4070f4;
}
We will now style the form’s container and its elements. We’ll set the container’s width to 100%, background color to white, and border-radius to add rounded corners using the class selector (.container).
Next, we’ll use some fundamental class selections to layout different form inputs. The form input fields’ width, height, margin, padding, and font size will all be increased. To improve comprehension, simply go over the code and attempt to add your own flair to the form.
.container {
position: relative;
width: 100%;
max-width: 370px;
padding: 25px;
background-color: #fff;
border-radius: 8px;
}
.container h3 {
font-size: 22px;
font-weight: 600;
color: #333;
}
.container form {
margin-top: 30px;
}
form .field {
margin-bottom: 20px;
}
form .input-field {
position: relative;
width: 100%;
height: 55px;
}
.input-field input {
width: 100%;
height: 100%;
padding: 0 15px;
border: 1px solid #d1d1d1;
border-radius: 8px;
outline: none;
}
.invalid input {
border: 1px solid #d93025;
}
.input-field .password-hide {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
font-size: 18px;
color: #919191;
padding: 3px;
cursor: pointer;
}
.field .error {
display: flex;
align-items: center;
margin-top: 6px;
font-size: 14px;
font-weight: 400;
color: #d93025;
display: none;
}
.invalid .error {
display: flex;
}
.error .error-icon {
font-size: 15px;
margin-right: 6px;
}
.create-password .error {
align-items: flex-start;
}
.create-password .error-icon {
margin-top: 4px;
}
.button-field {
margin: 25px 0 6px;
}
.button-field input {
font-size: 16px;
font-weight: 400;
background-color: #4070f4;
color: #fff;
transition: all 0.3s;
cursor: pointer;
}
.button-field input:hover {
background-color: #0e4bf1;
}
CSS Output
Interactive Registration Form Validation Using Javascript
We’ll use JavaScript to add a form validation function. Only accurate information can be validated with the use of this kind of validation. We’ll give different form items validation. We’ll include the password in the email and validate its attributes as well as the properties of the password confirmation.
const form = document.querySelector('form'),
emailField = form.querySelector('.email-field'),
emailInput = emailField.querySelector('.email'),
passField = form.querySelector('.create-password'),
passInput = passField.querySelector('.password'),
cPassField = form.querySelector('.confirm-password'),
cPassInput = cPassField.querySelector('.confirpassword');
We will first select each HTML form element using document.queryselector. Every element of an HTML form will be chosen for validation purposes.
Email Validation
// ---- ---- Email Validation ---- ---- //
function checkEmail() {
const emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
if (!emailInput.value.match(emailPattern)) {
return emailField.classList.add('invalid');
}
emailField.classList.remove('invalid');
}
To add a validity attribute to our email, we’ll develop an email validation function. Inside that function, we’ll create a regular expression that has the distinct letters and symbols required for email validation. The if-else statement will then be used to determine whether or not the supplied email matches the default pattern. If not, the class.addlist method will be used to show and add the wrong email.
Hide Password
// ---- ---- Hide Password ---- ---- //
const eyeIcons = document.querySelectorAll('.password-hide');
eyeIcons.forEach((eyeIcon) => {
eyeIcon.addEventListener('click', () => {
const pInput = eyeIcon.parentElement.querySelector('input');
if (pInput.type === 'password') {
eyeIcon.classList.replace('bx-hide', 'bx-show');
return (pInput.type = 'text');
}
eyeIcon.classList.replace('bx-show', 'bx-hide');
return (pInput.type = 'password');
});
});
The “Hide Passwords” function allows passwords to be hidden for user security and privacy. To add a click event to our hidden password function, we’ll pick the hide password element. The concealed points of the input text will be toggled as soon as the user clicks on the eye.
Password Validation
// ---- ---- Password Validation ---- ---- //
function createPass() {
const passPattern =
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
if (!passInput.value.match(passPattern)) {
return passField.classList.add('invalid');
}
passField.classList.remove('invalid');
}
// ---- ---- Confirm Password Validation ---- ---- //
function confirmPass() {
if (passInput.value !== cPassInput.value || cPassInput.value === '') {
return cPassField.classList.add('invalid');
}
cPassField.classList.remove('invalid');
}
// ---- ---- Calling Function on Form Sumbit ---- ---- //
form.addEventListener('submit', (e) => {
e.preventDefault();
checkEmail();
createPass();
confirmPass();
emailInput.addEventListener('keyup', checkEmail);
passInput.addEventListener('keyup', createPass);
cPassInput.addEventListener('keyup', confirmPass);
});
We’ll define the length of the password as eight characters, consisting of alphabets, numerals, and special characters, and we’ll construct a constant in the password validation method to hold all special characters. We’ll use the if-else statement in the password validation function to generate a password match pattern using these validations.
The checkmail, createpass, and confirmpass methods are used when the user clicks the submit button to ascertain whether or not all requirements have been satisfied. The listener is used to handle this click event. The form will be submitted if satisfied.
Final Output
See the Pen Registration Form Validate by Alex Golovanov (@AlexGolovanov) on CodePen.
We’ve now successfully developed an interactive form that uses validation from JavaScript. This project is directly copyable into your IDE for use. We hope you have a clear understanding of the project; if not, please feel free to leave a comment!
If you find this blog useful, don’t forget to follow on Instagram for code videos and conduct a Google search for cssiseasy.com to find front-end projects with source code.
