Пользовательские сообщения проверки формы JavaScript и минимальная длина поля
Я пытаюсь использовать JavaScript для проверки ввода простой формы. Есть три поля:
Имя - обязательное текстовое поле, не может быть пустым
Электронное письмо - обязательное поле электронной почты, которое должно быть из домена domain.com.au
Почтовый индекс - это обязательное числовое поле длиной 4 символа.
Я также хотел бы, чтобы пользовательские сообщения об ошибках отображались справа от полей, а не отображались всплывающие окна системы.
На данный момент первые два поля проверены правильно, но пользовательские сообщения не отображаются. Поле почтового индекса не проверяется, за исключением того, что в нем должен быть хотя бы один номер.
Начинающий JavaScript, пожалуйста, будьте любезны.
function validation() {
var emailPattern = new RegExp('\w.%+-]+@domain\.com\.au');
if (document.getElementById("name").value.length == 0) {
document.getElementById("nameAlert").innerHTML = "<em> Please enter name here</em>";
return false;
} else if (emailPattern.test(document.getElementById("email").value) = false) {
document.getElementById("emailAlert").innerHTML = "<em> Your email must include @domain.com.au </em>";
return false;
} else if (document.getElementById("postcode").value.length != 4) {
document.getElementById("postcodeAlert").innerHTML = "<em> Your postcode must be four characters long </em>";
return false;
} else return true;
}<form method = "POST" action = "#" onsubmit = "return validation();">
<label for = "name">Name</label>
<input type = "text" name = "name" id = "name"><span id = "nameAlert"></span><br><br>
<label for = "email">Email</label>
<input type = "text" name = "email" id = "email" pattern = "[\w.%+-]+@domain\.com\.au"><span id = "emailAlert"></span><br><br>
<label for = "postcode">Postcode</label>
<input type = "text" name = "postcode" id = "postcode" pattern = "^[0-9]{4}"><span id = "postcodeAlert"></span><br><br>
<button type = "submit">Submit Query</button>
</form>Спасибо, я изменил это - все еще не работает
Нет закрывающих тегов для inputw3schools.com/tags/tag_input.asp
Спасибо @Krzysztof Janiszewski, я удалил их, но без радости
Для всех я вижу сообщение отображается. Попробуйте удалить reuquired из тега input, и вы увидите, что ваш код javascript работает. Также я не думаю, что type = "number" - хорошее решение для почтового индекса.
Спасибо, я удалил все необходимые теги, и теперь настраиваемое сообщение отображается для поля имени, но не для остальных. Проверка длины поля почтового индекса, похоже, работает для типа текста, но не для числового типа, поэтому я изменил шаблон RegExp на «^ [0-9] {4}», и теперь он работает! Вот если бы я только мог получать настраиваемые сообщения для последних двух полей.
Когда вы обнаружите проблемы, описанные в Комментарии, отредактируйте свой вопрос, чтобы люди могли видеть, где вы сейчас находитесь, чтобы можно было легко определить следующую проблему / ответить на нее.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
У вас есть оператор if и else. Таким образом, если первое условие истинно, другие не будут проверяться, поэтому отображается только одно сообщение.
Вот рабочий пример
function validation() {
var emailPattern = new RegExp('\w.%+-]+@domain\.com\.au');
var isOk = true;
if (document.getElementById("name").value.length == 0) {
document.getElementById("nameAlert").innerHTML = "<em> Please enter name here</em>";
isOk = false;
}
if (emailPattern.test(document.getElementById("email").value) == false) {
document.getElementById("emailAlert").innerHTML = "<em> Your email must include @domain.com.au </em>";
isOk = false;
}
if (document.getElementById("postcode").value.length != 4) {
document.getElementById("postcodeAlert").innerHTML = "<em> Your postcode must be four characters long </em>";
isOk = false;
}
return isOk;
}<form method = "POST" action = "#" onsubmit = "return validation();">
<label for = "name">Name</label>
<input type = "text" name = "name" id = "name"><span id = "nameAlert"></span><br><br>
<label for = "email">Email</label>
<input type = "text" name = "email" id = "email" pattern = "[\w.%+-]+@domain\.com\.au"><span id = "emailAlert"></span><br><br>
<label for = "postcode">Postcode</label>
<input type = "number" name = "postcode" id = "postcode" pattern = "^[0-9]{4}"><span id = "postcodeAlert"></span><br><br>
<button type = "submit">Submit Query</button>
</form>Спасибо, вы избавили меня от гораздо большего разочарования!
Обратите внимание на
</inpt>.