Блог

Главная - Вопросы по программированию - Как перенаправить после проверки формы?

Как перенаправить после проверки формы?

#javascript #html #validation

#javascript #HTML #проверка

Вопрос:

Я пытаюсь настроить перенаправление после запуска моего скрипта проверки формы. Но когда я нажимаю отправить, он выдает ошибку «Требуется допустимая ошибка электронной почты», а затем перенаправляет, пропуская мои проверки проверки.

В настоящее время я попытался добавить функцию в нижней части моего js-файла. Но он перенаправляет без выполнения проверок. 

 HTML
<button class="popup-button" onclick="openForm()">Open Form</button>
<div class="form-popup" id="form">
<form id="form" onsubmit="return formValidate(event)">
<p>
<input type="text" id="e-mail" placeholder="Email" />
</p><p>
<input type="password" id="pswd" placeholder="Password" />
</p>
<br>
<input id="submitButton" type="submit" class="submit" 
onclick="redirect()">
 <br>
<button type="button" class="btn cancel" 
onclick="closeForm()">Close</button>
</form>

JS
  function formValidate(event) {
event.preventDefault();
var form = document.getElementById('form');
var email = document.getElementById('e-mail').value;
var password = document.getElementById('pswd').value;

var emailRGEX = /^w ([.-]?w )*@w ([.-]?w )*(.w{2,3}) $/;

var emailResult = emailRGEX.test(email);
//validate Email
if(emailResult == false){
alert("Please enter a valid email address");
return false;
}

//validate lower case
var lowerCaseLetters = /[a-z]/g;
if(password.match(lowerCaseLetters) == null) {
  alert("Password needs a lower case!");
  return false;
}

//validate upper case
var upperCaseLetters = /[A-Z]/g;
if(password.match(upperCaseLetters) == null){
  alert("Password needs an upper case!");
  return false;
}

//validate numbers
var numbers = /[0-9]/g;
if(password.match(numbers) == null){
  alert("Password needs a number!");
  return false;
}
//validate special characters
 var special = /[!@#$%^amp;*(),.?":{}|<>]/g;
 if(password.match(special) == null){
alert("Password needs a special character!");
return false;
}
 //validate password length
 if(password.length<8) {
alert("Password needs to be at least 8 characters");
return false;
}

form.submit();

 }
function redirect(){
window.location.href="thankyou.html";
}

Я ожидаю, что форма перенаправит на мой thankyou.html страница после выполнения проверки.

Комментарии:

1. Ответ удален после того, как заметил, что у вас большие проблемы. Ваша первая проблема заключается в том, что вы на самом деле не вызываете formValidate() функцию нигде в своем коде. Во-вторых, если вы отправите форму, страница обновится и redirect() функция вызываться не будет. Вам понадобится условная проверка в приведенном выше коде, чтобы увидеть, была ли форма успешно отправлена, прежде чем вы сможете перенаправить.

2. @AndrewDaly — Пожалуйста, перенесите свой комментарий в ответ, поскольку он заслуживает выбора в качестве правильного ответа и любых положительных отзывов, которые он также может получить.

Ответ №1:

 <!DOCTYPE html>
<html>
<head>
<script>
 function validateForm() {
 var x = document.forms["myForm"]["fname"].value;
 if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>

<form name="myForm" action="b.html" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

</body>
</html>

Пожалуйста, найдите приведенный пример.

И убедитесь, что ваш b.html также находится в той же папке. Если вы хотите вызвать другой HTML из javascript, тогда используйте window.Расположение.href = url; после успешной проверки.

Надеюсь, это поможет вам. Спасибо

Ответ №2:

Поместите перенаправление в функцию проверки перед form.submit