表单验证错误。 重定向到错误页面
[英]Form validation error. Redirects to error page
问题描述
so I've created a form. 
所以我创建了一个表格。 I'm trying to use JavaScript to validate fields. 我正在尝试使用JavaScript来验证字段。 When I press submit, it does nothing. 当我按提交时，它什么都不做。 It just sends me to a page saying 'Your file was not found.' 它只是将我带到一个页面，上面写着“找不到您的文件”。 I do realize that the code is mostly HTML and not JS. 我确实意识到该代码主要是HTML，而不是JS。 I've been testing as I'm going and it's not working already. 我一直在进行测试，但尚未开始工作。 Any help is appreciated 任何帮助表示赞赏
Here is my code: 这是我的代码：
function validateForm() { var firstname = document.myForm.fname.value; if (firstname === "" || firstname === " ") { alert("First name is empty!"); return false; } var middlename = document.myForm.middle.value; if (middle == "" || middle == " ") { alert("Middle name is empty"); return false; } } function validateForm() { var firstname = document.myForm.fname.value; if (firstname === "" || firstname === " ") { alert("First name is empty!"); return false; } var middlename = document.myForm.middle.value; if (middle == "" || middle == " ") { alert("Middle name is empty"); return false; } var lastname = document.myForm.lname.value; if (lastname == "" || lastname == " ") { alert("Last name is empty"); return false; } }
<!DOCTYPE html> <html> <head> <title>My form validation</title> </head> <body> <form name="myForm" action="fakeFormCheck.php" onsubmit="validateForm()" method="post"> <fieldset> *First Name: <input type="text" name="fname"> <br><br> Middle/Initial: <input type="text" name="middle"> <br><br> *Last Name: <input type="text" name="lname"> <br><br> *Email: <input type="text" name="email"> <br><br> Phone: <input type="number" name="number"> <br><br> </fieldset> <br> <fieldset> *Reason: <select name="choice"> <option value="Information">Infor reques</option> <option value="feedback">Feedback</option> <option value="other">Other</option> </select> <br><br> *Message: <br> <textarea name="message" rows="7" cols="30"> </textarea> </fieldset> <input type="submit" value="Send"> <input type="reset" value="Clear"> </form> </body> </html>
3 个解决方案
解决方案1
0 2018-04-09 04:20:10
Try attaching the handler in Javascript rather than inline-eval-HTML, and using preventDefault to prevent the default form submission. 尝试使用Javascript（而不是inline-eval-HTML）附加处理程序，并使用preventDefault阻止默认表单提交。
<form name="myForm" action="fakeFormCheck.php" method="post">
and 和
document.querySelector('form[name="myForm"]').addEventListener('submit', (e) => {
// do tests
if (invalid) {
// something is invalid, prevent the default action of submitting the form:
e.preventDefault();
}
// else the form will submit by default
});
解决方案2
0 已采纳 2018-04-09 04:25:14
Add preventDefault() to the validateForm function & return true once the form is valid 将preventDefault()添加到validateForm函数，并在表单有效后返回true
function validateForm(e) { e.preventDefault(); var firstname = document.myForm.fname.value; if (firstname === "" || firstname === " ") { alert("First name is empty!"); return false; } var middlename = document.myForm.middle.value; if (middlename == "" || middlename == " ") { alert("Middle name is empty"); return false; } }
<form name="myForm" action="fakeFormCheck.php" onsubmit="validateForm(event)" method="post"> <fieldset> *First Name: <input type="text" name="fname"> <br><br> Middle/Initial: <input type="text" name="middle"> <br><br> *Last Name: <input type="text" name="lname"> <br><br> *Email: <input type="text" name="email"> <br><br> Phone: <input type="number" name="number"> <br><br> </fieldset> <br> <fieldset> *Reason: <select name="choice"> <option value="Information">Infor reques</option> <option value="feedback">Feedback</option> <option value="other">Other</option> </select> <br><br> *Message: <br> <textarea name="message" rows="7" cols="30"> </textarea> </fieldset> <input type="submit" value="Send"> <input type="reset" value="Clear"> </form>
解决方案3
0 2018-04-09 04:26:58
Use return in onsubmit="validateForm()" for example onsubmit="return validateForm()" . 在onsubmit="validateForm()"使用return，例如onsubmit="return validateForm()" 。 second thing you are taking the middle name in middlename variable but your checking with some other varible if (middle == "" || middle == " ") { 第二件事是您在middlename变量中使用中间名，但是使用其他变量进行检查if (middle == "" || middle == " ") {
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.