提交前先检查错误

Question

I have a form which I want it to be verified and validated by a try-catch block plus two other functions. Here is what I have: 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:test@gmail.com" 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 + "."; 
    }
}

The thing that i want it to happen is the following: Firstly, it does the form validation but afterwards if its correct, submits as well. I tried to make it first verify the forms before actually submits but without any success. While browsing i find out it could be done by either stopPropaganation , preventDefault or return false methods but still have no idea how to make it happen. I will rep the guys who help me. Thanks in advance! Fiddle: However in fiddle it doesn't run properly as it should: http://jsfiddle.net/5T9sJ/

Answer 1

You need to change your code according to my editions:

...
<input formaction="mailto:test@gmail.com" type="submit" value="Submit all" id="submit" method="post" formtarget="_blank" />
...

Then make processValidate method to wrap all other validations into it:

$(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 + ".";
        }
    }

});

Explanation:

You have several methods bound on submit input type, so clicking on it will always call form submission.

I added jQuery click handler for this action to prevent the default action of submit button.

I think e.preventDefault() suits here the best.

WORKING DEMO: http://jsfiddle.net/rbegf/