Scribd
Upload
2 views

ex3-form validation

Form Validation

Uploaded by

Mr.Sakthivel csg
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

ex3-form validation

Form Validation

Uploaded by

Mr.Sakthivel csg
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

Ex-3.

Form Validation
Html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<script defer src="./index.js"></script>
</head>
<body>
<div class="container">
<form id="form" action="/">
<h1>Registration</h1>
<div class="input-control">
<label for="username">Username</label>
<input id="username" name="username" type="text">
<div class="error"></div>
</div>
<div class="input-control">
<label for="email">Email</label>
<input id="email" name="email" type="text">
<div class="error"></div>
</div>
<div class="input-control">
<label for="password">Password</label>
<input id="password"name="password" type="password">
<div class="error"></div>
</div>
<div class="input-control">
<label for="password2">Password again</label>
<input id="password2"name="password2" type="password">
<div class="error"></div>
</div>
<button type="submit">Sign Up</button>
</form>
</div>
</body>
</html>
css
body {
background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
font-family: 'Poppins', sans-serif;
}

#form {
width: 300px;
margin: 20vh auto 0 auto;
padding: 20px;
background-color: whitesmoke;
border-radius: 4px;
font-size: 12px;
}
#form h1 {
color: #0f2027;
text-align: center;
}

#form button {
padding: 10px;
margin-top: 10px;
width: 100%;
color: white;
background-color: rgb(41, 57, 194);
border: none;
border-radius: 4px;
}

.input-control {
display: flex;
flex-direction: column;
}

.input-control input {
border: 2px solid #f0f0f0;
border-radius: 4px;
display: block;
font-size: 12px;
padding: 10px;
width: 100%;
}

.input-control input:focus {
outline: 0;
}

.input-control.success input {
border-color: #09c372;
}

.input-control.error input {
border-color: #ff3860;
}

.input-control .error {
color: #ff3860;
font-size: 9px;
height: 13px;
}

js
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');

form.addEventListener('submit', e => {
e.preventDefault();

validateInputs();
});

const setError = (element, message) => {


const inputControl = element.parentElement;
const errorDisplay = inputControl.querySelector('.error');

errorDisplay.innerText = message;
inputControl.classList.add('error');
inputControl.classList.remove('success')
}

const setSuccess = element => {


const inputControl = element.parentElement;
const errorDisplay = inputControl.querySelector('.error');

errorDisplay.innerText = '';
inputControl.classList.add('success');
inputControl.classList.remove('error');
};

const isValidEmail = email => {


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,}))
$/;
return re.test(String(email).toLowerCase());
}

const validateInputs = () => {


const usernameValue = username.value.trim();
const emailValue = email.value.trim();
const passwordValue = password.value.trim();
const password2Value = password2.value.trim();

if(usernameValue === '') {


setError(username, 'Username is required');
} else {
setSuccess(username);
}

if(emailValue === '') {


setError(email, 'Email is required');
} else if (!isValidEmail(emailValue)) {
setError(email, 'Provide a valid email address');
} else {
setSuccess(email);
}

if(passwordValue === '') {


setError(password, 'Password is required');
} else if (passwordValue.length < 8 ) {
setError(password, 'Password must be at least 8 character.')
} else {
setSuccess(password);
}

if(password2Value === '') {


setError(password2, 'Please confirm your password');
} else if (password2Value !== passwordValue) {
setError(password2, "Passwords doesn't match");
} else {
setSuccess(password2);
}

};

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy