Проверка html-формы с помощью JS при отправке
У меня есть форма с опционным элементом сверху и полем электронной почты.
<form class = "form-versenden" action = "mainVersendet.php" method = "post" name = "send">
<div class = "form-group">
<h4>Bitte tragen Sie die folgenden Daten ein</h4>
<div class = "form-group">
<label for = "versandart">Versandart</label>
<select class = "form-control" id = "versandart" name = "versandart" autofocus>
<option value = "both">E-Mail und Druck</option>
<option value = "onlyEmail">Nur E-Mail</option>
<option value = "onlyPrint">Nur Druck</option>
</select>
</div>
<div class = "form-group">
<label for = "email">E-Mail</label>
<input type = "email" class = "form-control" id = "email" placeholder = "email" name = "email">
</div>
<button class = "btn" type = "submit">Versenden</button>
</div>
</form>
В зависимости от того, что выбирает пользователь, я должен проверить, введен ли адрес электронной почты в случае «оба» и «только электронная почта». Поскольку электронная почта не требуется во всех трех случаях, я не могу использовать обязательный элемент HTML для поля электронной почты. Итак, я попытался проверить это на событии отправки следующим образом:
document.querySelector('form[name = "send"]').addEventListener("submit", validateFields);
function validateFields(){
var versandart = document.getElementById("versandart");
var email = document.getElementById("email");
if (versandart.value == 'both' || versandart.value == 'onlyEmail'){
if (email.value == ''){
email.setCustomValidity('EMail muss eingegeben werden');
return false;
}else if (CHECK HERE if Mail is not correct){
email.setCustomValidity('EMail format is not correct');
return false;
}else{
//in this case email is not empthy and is correct
return true;
}
}
}
Но это не работает, потому что я перезаписываю стандартную проверку HTML для действительного адреса электронной почты. Поэтому я должен снова проверить это в пункте «ПРОВЕРЬТЕ ЗДЕСЬ, если Mail неверен».
Как мне это сделать и правильно ли это? Или я должен добавить onchangelistener в поле versandart и добавить необходимый тег в поле электронной почты, если выбранное значение подходит для первых двух случаев?
Вы также можете добавить onsubmit = "validateFields();" к атрибутам формы, таким образом вам не нужно добавлять прослушиватель событий в код (однако работает только в HTML 5).
Идеально! Я искал эту функцию isEMail! Сначала у меня было это с событием onsubmit html, но я прочитал, что это лучшее решение! Но это должно быть onsubmit = "return validateFields()" или?
Да, ты прав, извини. ;) Что ж, рад, что смог помочь. Я тогда напишу это в решении.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
В вашем else if используйте функцию isEmail() следующим образом:
else if (email.value.isEmail()) {
return true;
// Now the form will get submitted to the PHP script.
}
string.isEmail() возвращает true, если введенный шаблон совпадает с адресом электронной почты, иначе false.
Пожалуйста, не забудьте также выполнить проверку формы на стороне сервера. Если взломщик отключает JavaScript, он может вызвать хаос в вашей системе, если у вас есть только проверка JavaScript, особенно если вы, по-видимому, не можете использовать обязательный атрибут HTML для ввода электронной почты.
У вас есть проблемы с проверкой того, является ли это действительным адресом электронной почты? Если это так, JavaScrift предлагает функцию isEmail(). Иначе, если (email.value.isEmail())