loginvalidation.
html
<html>
<head>
<script>
function checkUser()
{
user="abc";
pass="xyz";
us=[Link];
ps=[Link];
if(us==user && ps==pass)
{
[Link]("[Link]");
}
else
{
alert("bye");
}
}
</script>
</head>
<body>
<form action="#" name="f1" onSubmit="checkUser()">
UserName:<input type="text" name="user"><br>
PassWord:<input type="password" name="pass"><br>
<input type="submit">
<a href="[Link]">SignUp</a>
</form>
</body>
</html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Form Validation Demo</title>
<link rel="stylesheet" href="css/[Link]">
</head>
<body>
<div class="container">
<form id="signup" class="form">
<h1>Sign Up</h1>
<div class="form-field">
<label for="username">Username:</label>
<input type="text" name="username" id="username"
autocomplete="off">
<small></small>
</div>
<div class="form-field">
<label for="email">Email:</label>
<input type="text" name="email" id="email" autocomplete="off">
<small></small>
</div>
<div class="form-field">
<label for="password">Password:</label>
<input type="password" name="password" id="password"
autocomplete="off">
<small></small>
</div>
<div class="form-field">
<label for="confirm-password">Confirm Password:</label>
<input type="password" name="confirm-password" id="confirm-
password" autocomplete="off">
<small></small>
</div>
<div class="form-field">
<input type="submit" value="Sign Up">
</div>
</form>
</div>
<script src="js/[Link]"></script>
</body>
</html>
js/[Link]
const usernameEl = [Link]('#username');
const emailEl = [Link]('#email');
const passwordEl = [Link]('#password');
const confirmPasswordEl = [Link]('#confirm-password');
const form = [Link]('#signup');
const checkUsername = () => {
let valid = false;
const min = 3, max = 25;
const username = [Link]();
if (!isRequired(username)) {
showError(usernameEl, 'Username cannot be blank.');
} else if (!isBetween([Link], min, max)) {
showError(usernameEl, `Username must be between ${min} and ${max}
characters.`)
} else {
showSuccess(usernameEl);
valid = true;
}
return valid;
};
const checkEmail = () => {
let valid = false;
const email = [Link]();
if (!isRequired(email)) {
showError(emailEl, 'Email cannot be blank.');
} else if (!isEmailValid(email)) {
showError(emailEl, 'Email is not valid.')
} else {
showSuccess(emailEl);
valid = true;
}
return valid;
};
const checkPassword = () => {
let valid = false;
const password = [Link]();
if (!isRequired(password)) {
showError(passwordEl, 'Password cannot be blank.');
} else if (!isPasswordSecure(password)) {
showError(passwordEl, 'Password must has at least 8 characters that include
at least 1 lowercase character, 1 uppercase characters, 1 number, and 1 special
character in (!@#$%^&*)');
} else {
showSuccess(passwordEl);
valid = true;
}
return valid;
};
const checkConfirmPassword = () => {
let valid = false;
// check confirm password
const confirmPassword = [Link]();
const password = [Link]();
if (!isRequired(confirmPassword)) {
showError(confirmPasswordEl, 'Please enter the password again');
} else if (password !== confirmPassword) {
showError(confirmPasswordEl, 'The password does not match');
} else {
showSuccess(confirmPasswordEl);
valid = true;
}
return valid;
};
const isEmailValid = (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 [Link](email);
};
const isPasswordSecure = (password) => {
const re = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?
=.{8,})");
return [Link](password);
};
const isRequired = value => value === '' ? false : true;
const isBetween = (length, min, max) => length < min || length > max ? false :
true;
const showError = (input, message) => {
// get the form-field element
const formField = [Link];
// add the error class
[Link]('success');
[Link]('error');
// show the error message
const error = [Link]('small');
[Link] = message;
};
const showSuccess = (input) => {
// get the form-field element
const formField = [Link];
// remove the error class
[Link]('error');
[Link]('success');
// hide the error message
const error = [Link]('small');
[Link] = '';
}
[Link]('submit', function (e) {
// prevent the form from submitting
[Link]();
// validate fields
let isUsernameValid = checkUsername(),
isEmailValid = checkEmail(),
isPasswordValid = checkPassword(),
isConfirmPasswordValid = checkConfirmPassword();
let isFormValid = isUsernameValid &&
isEmailValid &&
isPasswordValid &&
isConfirmPasswordValid;
// submit to the server if the form is valid
if (isFormValid) {
}
});
const debounce = (fn, delay = 500) => {
let timeoutId;
return (...args) => {
// cancel the previous timer
if (timeoutId) {
clearTimeout(timeoutId);
}
// setup a new timer
timeoutId = setTimeout(() => {
[Link](null, args)
}, delay);
};
};
[Link]('input', debounce(function (e) {
switch ([Link]) {
case 'username':
checkUsername();
break;
case 'email':
checkEmail();
break;
case 'password':
checkPassword();
break;
case 'confirm-password':
checkConfirmPassword();
break;
}
}));
Ref:- [Link]
validation/
