У меня есть форма, которую я хочу, чтобы она была проверена и проверена блоком try-catch плюс две другие функции. Вот что я имею: HTML:
<h5>Please enter your name below</h5>
<form name="textForm">
<label for="name">First name:</label>
<input type="text" name="fname" id="name">
</form>
<h5>Please enter your e-mail below</h5>
<form name="mailForm">
<label for="email">Email:</label>
<input type="email" name="email" id="email">
</form>
<form action="">
<label for="height">Your height:</label>
<input type="text" placeholder="in centimetres" name="personHeight" id="height" />
<br></br>
<input formaction="mailto:[email protected]" onclick="heightCheck();validateTextForm();validateMailForm();" type="submit" value="Submit all" id="submit" method="post" formtarget="_blank" />
<br></br>
<p id="mess"></p>
</form>
JS:
function validateTextForm() {
var x = document.forms["textForm"]["fname"].value;
if (x == null || x == "") {
alert("First name must be filled out");
return false;
}
}
function validateMailForm() {
var z = document.forms["mailForm"]["email"].value;
var atpos = z.indexOf("@");
var dotpos = z.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= z.length) {
alert("Not a valid e-mail address");
return false;
}
}
function heightCheck() {
try {
var x = document.getElementById("height").value;
if (x == "")
throw "enter your height";
if (isNaN(x)) throw "not a number";
if (x > 250)
throw "height is too high";
if (x < 80)
throw "height is too low";
} catch (err) {
var y = document.getElementById("mess");
y.innerHTML = "Error: " + err + ".";
}
}
То, что я хочу, чтобы это произошло, заключается в следующем: во-первых, он выполняет валидацию формы, а затем, если ее правильно, подает также. Я попытался сначала проверить формы, прежде чем отправлять, но без каких-либо успехов. Во время просмотра я узнаю, что это может быть сделано либо stopPropaganation
, preventDefault
либо return false
методов, но до сих пор не знаю, как это сделать. Я расскажу о парнях, которые помогают мне. Заранее спасибо! Fiddle: Однако в скрипке он работает не так, как должен: http://jsfiddle.net/5T9sJ/
Вы должны изменить свой код в соответствии с моими выпусками:
...
<input formaction="mailto:[email protected]" type="submit" value="Submit all" id="submit" method="post" formtarget="_blank" />
...
Затем сделайте метод processValidate
для processValidate
всех других валидаций в него:
$(document).ready(function () {
$('input#submit').click(function (e) {
e.preventDefault();
validateTextForm();
validateMailForm();
heightCheck();
});
function validateTextForm() {
var x = document.forms["textForm"]["fname"].value;
if (x === null || x === "") {
alert("First name must be filled out");
return false;
}
}
function validateMailForm() {
var z = document.forms["mailForm"]["email"].value;
var atpos = z.indexOf("@");
var dotpos = z.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= z.length) {
alert("Not a valid e-mail address");
return false;
}
}
function heightCheck() {
try {
var x = document.getElementById("height").value;
if (x === "") throw "enter your height";
if (isNaN(x)) throw "not a number";
if (x > 250) throw "height is too high";
if (x < 80) throw "height is too low";
} catch (err) {
var y = document.getElementById("mess");
y.innerHTML = "Error: " + err + ".";
}
}
});
Объяснение:
У вас есть несколько методов, связанных с типом ввода отправки, поэтому нажатие на него всегда будет вызывать отправку формы.
Я добавил JQuery click
обработчика для этого действия, чтобы предотвратить действие по умолчанию кнопки отправки.
Я думаю, что e.preventDefault()
здесь подходит лучше всего.
РАБОЧАЯ ДЕМО: http://jsfiddle.net/rbegf/