表单验证错误。重定向到错误页

Question

所以我创建了一个表格。我试图使用JavaScript来验证字段。当我按submit键时，它什么也做不了。它只是把我送到一页上，上面写着“你的文件没有找到。”我确实意识到，代码主要是HTML而不是JS。我一直在测试，因为我要去，它已经不起作用了。任何帮助都是非常感谢的。

这是我的代码：

​

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>

​

Answer 1

将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>

​

Answer 2

尝试将处理程序附加在Javascript中，而不是在内联eval中，并使用preventDefault来防止默认表单提交。

<form name="myForm" action="fakeFormCheck.php" method="post">

和

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
});

Answer 3

在onsubmit="validateForm()"中使用返回，例如onsubmit="return validateForm()"。第二件事是在middlename变量中取中间名，但是使用其他变量if (middle == "" || middle == " ") {进行检查。