Я хочу добавить базовый JS-скрипт проверки имени и электронной почты на HTML-страницу, поэтому при нажатии кнопки «Отправить» он будет проверять несколько полей и выдавать ошибки, если они заполнены неправильно. К сожалению, при нажатии кнопки «Отправить» страница просто перезагружается с пустыми полями, и на HTML-странице не возникает никаких ошибок.
Я все еще изучаю JS.
Вот мой фрагмент JS для проверки имени и электронной почты:
//Check if name is anything other than letters or spaces. If it isn't throw error.
function validateForm() {
var validEntry = /[a-zA-Z ]/;
var x = document.forms["clientinfo"]["txtFullName"].value;
if (x.value.match(!validEntry)) {
alert("Invalid name. Please try again.");
document.clientinfo.txtFullName.focus();
return false;
}
// Check if email is in proper format - [email protected]. If it isn't throw error.
var y = document.forms["clientinfo"]["txtEmail"].value;
var validEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})/
if (y.value.match(validEmail)) {
return true
} else {
alert("Invalid email. Please try again.")
document.clientinfo.txtEmail.focus();
return false;
}
}
<div id = "inputArea">
<form name = "clientinfo" onsubmit = "return validateForm()" method = "post">
Name:
<input class = "Inputinfo" type = "text" name = "txtFullName" placeholder = "John Stewart" required>
<br> Email:
<input class = "Inputinfo" type = "text" name = "txtEmail" placeholder = "[email protected]" required>
<br> Phone:
<input class = "Inputinfo" type = "tel" name = "phone" placeholder = "XXX-XXX-XXXX" pattern = "[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
<br> Description:
<br>
<textarea class = "Inputinfo" id = "txtDescription" name = "description" rows = "8" cols = "50" placeholder = "Please enter any additional client information here."></textarea>
<br>
<input type = "submit" value = "Enter" id = "enterbutton">
</form>
</div>
Как я могу решить эту проблему?
Отвечает ли это на ваш вопрос? preventDefault() останавливает проверку формы
Это не нужно. Если атрибут onXXX
возвращает false, действие по умолчанию предотвращается. Итак, return validateForm()
делает то же самое. @mykaf
if (x.value.match(!validEntry))
должно быть if (!x.value.match(validEntry))
. Вам также нужно изменить регулярное выражение, чтобы оно проверяло весь ввод.
!validEntry
— это false
, поэтому вы проверяете x.value.match(false)
в своем первом утверждении if
. Что вам нужно, так это if (!x.value.match(validEntry))
, и вам нужно изменить регулярное выражение, чтобы оно соответствовало всей входной строке (в настоящее время оно ищет совпадение допустимых символов в любом месте ввода.
x.value
и y.value
должны быть просто x
и y
. Вы уже использовали .value
при назначении переменных, поэтому они содержат строки, а не элементы ввода.
Чтобы упростить добавление дополнительных проверок, не делайте return true
, когда электронная почта действительна. Поместите это в конец функции и просто сделайте return false
в каждом из недопустимых случаев.
//Check if name is anything other than letters or spaces. If it isn't throw error.
function validateForm() {
var validEntry = /^[a-zA-Z ]+$/;
var x = document.forms["clientinfo"]["txtFullName"].value;
if (!x.match(validEntry)) {
alert("Invalid name. Please try again.");
document.clientinfo.txtFullName.focus();
return false;
}
// Check if email is in proper format - [email protected]. If it isn't throw error.
var y = document.forms["clientinfo"]["txtEmail"].value;
var validEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})$/
if (!y.match(validEmail)) {
alert("Invalid email. Please try again.")
document.clientinfo.txtEmail.focus();
return false;
}
return true;
}
<div id = "inputArea">
<form name = "clientinfo" onsubmit = " validateForm(); return false" method = "post">
Name:
<input class = "Inputinfo" type = "text" name = "txtFullName" placeholder = "John Stewart" required>
<br> Email:
<input class = "Inputinfo" type = "text" name = "txtEmail" placeholder = "[email protected]" required>
<br> Phone:
<input class = "Inputinfo" type = "tel" name = "phone" placeholder = "XXX-XXX-XXXX" pattern = "[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
<br> Description:
<br>
<textarea class = "Inputinfo" id = "txtDescription" name = "description" rows = "8" cols = "50" placeholder = "Please enter any additional client information here."></textarea>
<br>
<input type = "submit" value = "Enter" id = "enterbutton">
</form>
</div>
Вам нужно предотвратить действие формы по умолчанию (которое включает перезагрузку экрана) в вашей функции, передав событие и затем вызвав
event.preventDefault();