触发表单提交动作javascript HTML

Question

如果用户在字段验证中没有错误，则单击用户的“提交”按钮时，我将尝试验证表单中的字段并拉出另一个html文件。

1. 但是，验证器似乎不起作用。我希望“事件名称”和“位置”字段为字母数字字符和空格，但它似乎也需要其他值。
2. 在提交按钮中放入 onClick =“ self.location ='successPage.html'” 似乎也无法验证该字段。如果表单中的所有字段均已成功验证，我希望它移至successPage.html文件。

我不想使用jQuery。

这是我的代码：

<form action="" >
		<p>
			<label>
			  Day of the week:<br>
				  <select name="days">
					<option value="mon">Monday</option>
					<option value="tue">Tuesday</option>
					<option value="wed">Wednesday</option>
					<option value="thu">Thursday</option>
					<option value="fri">Friday</option>
					</select><br>
			</label>
			<label>
			  Start Time:<br>
					<input id="appt1" type="time" name="appt1" min="9:00" max="18:00" required /><br>
			</label>
			<label>
			  End Time:<br>
					<input id="appt2" type="time" name="appt2" min="9:00" max="18:00" required /><br>
			</label>
			<label>
			  Event Name:<br>
					<input id="ename" type="text" name="ename"  required /><br>
			</label>
			<label>
			  Location:<br>
					<input id="loc" type="text" name="location" required /><br><!--pattern="[A-Za-z0-9\s]"-->
			</label>
			<label>
			  Enter URL for the pictture:<br>
					<input id="urlpic" type="text" name="urlname" />
			</label>
			<br><br>
			
			<input type="reset" id="reset" value="Reset" />
			<input type="submit" id="submit" value="Submit" /><!--onClick="self.location='successPage.html'"-->
			<!-- <input type=button value="Submit" onClick="self.location='successPage.html'"> -->
		</p>
		</form>
    <script>
		function chkName() {
			var myName = documnet.getElementById("ename");
			var pos = myName.value.search( /^[A-Za-z0-9\s]/);
			if (pos != 0) {
				alert("Please check your input (" + myName + ") again");
				return false;
			} else
				return true;
		}
		
		function chkLoc() {
			var myLoc = documnet.getElementById("loc");
			var pos = myLoc.value.search( /^[A-Za-z0-9\s]/);
			if (pos != 0) {
				alert("Please check your input (" + myLoc + ") again");
				return false;
			} else
				return true;
		}
		
		document.getElementById("ename").onchange = chkName;
		document.getElementById("loc").onchange = chkLoc;
		
		</script>

Answer 1

<form action="." method="POST" onsubmit="return validate(this)">
    <input type="submit" value="Submit">
</form>

用户提交时，表单元素将被传递到validate函数中，返回false将不提交表单，并返回true来提交。

<script>
    function validate(form) {
        console.log(form); // log element to console on submit
        return false; // replace with true if input is good to be submitted
    }
</script>