Сначала проверьте на ошибки перед отправкой

0

У меня есть форма, которую я хочу, чтобы она была проверена и проверена блоком 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/

Теги:
validation
forms

1 ответ

1

Вы должны изменить свой код в соответствии с моими выпусками:

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

  • 0
    Я пытался, но почему-то функции проверки и высоты не происходили. Только что сделал attr.
  • 0
    Вы проверяли на наличие ошибок JS в консоли браузера?
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню