Триггер действия в форме отправить Javascript HTML - PullRequest
0 голосов
/ 07 февраля 2019

Я пытаюсь проверить поля в форме и открыть другой 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>

1 Ответ

0 голосов
/ 07 февраля 2019
<form action="." method="POST" onsubmit="return validate(this)">
    <input type="submit" value="Submit">
</form>

элемент формы будет передан в функцию проверки при отправке пользователем, вернет 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>
...