Я создал форму, требующую проверки электронной почты. Таким образом, пользователь должен дважды ввести свой адрес электронной почты, и если они не совпадают, он не сможет отправить. Я сделал это, просто сравнив значения полей электронной почты 1 и 2. Если они совпадают, «отключено» удаляется с кнопки отправки.
Все работало отлично, когда для меня было установлено значение «Вставить свой адрес электронной почты и« подтвердить свой адрес электронной почты еще раз ». Однако, чтобы пользователю не пришлось удалять этот текст, я удалил значение ивместо этого в HTML использовался «заполнитель».
Проблема теперь в том, что в тот момент, когда вы набираете что-либо, он возвращает значение true. Я думаю, он видит пустые значения как одинаковые, но не учитывает изменения взначение, когда пользователь вводит его.
Почему два поля всегда возвращаются как совпадающие?
<html>
<body>
<form class="theForm">
<p> Subscribe to my mailing list</p>
<input type="text" id="name" class="fields" name="name" placeholder="Name">
<input type="text" id="email1" class="fields" name="email" placeholder="Email Address" >
<input type="text" id="email2" class="fields" placeholder="Confirm Email Address" >
<input name="submit" id="submit" class="fields" type="submit" disabled value="Email Addresses
Do Not Match">
</form>
<script>
function verify (){
console.log(`email1.value: ${email1}: Email2: ${email2}`);
if(document.getElementById("email1").value === document.getElementById("email2").value) {
document.getElementById("submit").removeAttribute("disabled");
document.getElementById("submit").style.backgroundColor = "#004580";
document.getElementById("submit").style.cursor = "pointer";
} else {
document.getElementById("submit").setAttribute("disabled", "disabled");
}
}
$(".fields").on("change paste keyup", verify);
</script>
</body>
</html>