Instant form validation with JavaScript
Question
I want to be able to validate form instantly when I fill it out and I'm still on the text field. If something is missing/wrong it notifies me instantly on the right of the text field. Here I have combined HTML and JavaScript password validation with the alert window, but I don't know how to make these alerts appear next to the text and be instant. Any advice please.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<form name="passForm" onsubmit="return value (this)">
Your Password: <input type="password" name="passInput">
</br>
Confirm Password: <input type="password" name="confirmPassInput">
</br>
<input type="submit" value="Submit" id="submit" onclick="return value(passForm)">
</form>
<script>
function value(passForm) {
//Validating length
if ((passForm.passInput.value).length < 8) {
alert("Your password has less than 8 characters.");
passForm.passInput.focus();
return false;
}
//check for lower case
if (!passForm.passInput.value.match(/[a-z]/)) {
alert("Password must contain at least one lower case letter.");
passForm.passInput.focus();
return false;
}
//check for upper ase
if (!passForm.passInput.value.match(/[A-Z]/)) {
alert("Password must contain at least one upper case letter.");
passForm.passInput.focus();
return false;
}
//check for number
if (!passForm.passInput.value.match(/\d+/g)) {
alert("Password must contain at least one number.");
passForm.passInput.focus();
return false;
}
//Validating confirmation input
if (passForm.confirmPassInput.value == "") {
alert("Please confirm your password.");
passForm.passInput.focus();
return false;
}
//Validationg confirmation matches
if (passForm.confirmPassInput.value != passForm.passInput.value) {
alert("Your confirmation password does not match.");
passForm.passInput.focus();
return false;
}
};
</script>
</body>
</html>
2 answers
solution1
0 2018-12-09 21:23:56
In Bootstrap like Front-end Libraries let you to use some form validation styles. You can check it on link of Bootstrap.
You can make something like it. Just try to use single name attributes on form elements. When some element's value is not valid, show some hided elements or create elements for showing where is wrong and you can add event listeners to watch while inputs are filling by user, at this time you can check every field dynamically. If something is not valid, use red bordered or red color text messages to user dynamically, when the user fill the field valid, show them green borders or green text messages under the field simply.
solution2
0 2018-12-09 21:49:53
I can suggest 2 options. First try using validator.js or you can add keyup event listener and validate on every keystroke.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.