Мгновенная проверка формы с помощью JavaScript
Я хочу иметь возможность мгновенно подтверждать форму, когда я ее заполняю, а я все еще нахожусь в текстовом поле. Если чего-то не хватает или что-то не так, он сразу же уведомляет меня справа от текстового поля. Здесь я объединил проверку пароля HTML и JavaScript с окном предупреждений, но я не знаю, как заставить эти предупреждения появляться рядом с текстом и быть мгновенными. Любой совет, пожалуйста.
<!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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
В Бутстрап, как и в интерфейсных библиотеках, можно использовать некоторые стили проверки формы. Вы можете проверить это по ссылке Bootstrap.
Вы можете сделать что-нибудь подобное. Просто попробуйте использовать отдельные атрибуты name в элементах формы. Когда значение какого-либо элемента недействительно, покажите некоторые скрытые элементы или создайте элементы, чтобы показать, где неверно, и вы можете добавить прослушиватели событий для наблюдения, пока ввод заполняется пользователем, в это время вы можете проверять каждое поле динамически. Если что-то недействительно, используйте текстовые сообщения с красной рамкой или красного цвета для пользователя динамически, когда пользователь заполняет поле действительным, просто показывайте им зеленые границы или зеленые текстовые сообщения под полем.
Могу предложить 2 варианта. Сначала попробуйте использовать validator.js, или вы можете добавить прослушиватель событий keyup и проверять его при каждом нажатии клавиши.
Возможно, вы захотите проверить событие
oninputJS. Он срабатывает всякий раз, когда пользователь вводит символ в поле ввода.