触发动作表单提交JavaScript的HTML

Posted 2021-05-07

我想，以验证在表单中的字段，当用户点击提交按钮，如果有在现场确认没有错误拉了一个不同的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-9s]"-->
			</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-9s]/);
			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-9s]/);
			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>

答案

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

表单元素将被传递到验证功能，当用户提交，返回false不提交表单，和真实的提交。

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