JavaScript验证失败，但表单仍提交

Question

I have the following HTML form to take in user input:

    <form method = "post" action = "email.php" onsubmit = "return validateForm()" id = "form1">

        <div class = "page">
            <div class = "header">
                <p>
                    <span>CiHA Webinar Booking Form</span>
                    <img src = "lifespanLogo.png" class = "logo">
                </p>
            </div>

        <div class="splitter"></div>

            <div class = "body">
                <div id = "wbForm">

                    <p>
                        <label>
                            Webinar Date
                        </label>

                        <p>
                        <select name = "date" id = "date">
                            <option value = "choose">---</option>
                            <option value = "Wednesday 22nd January">Wednesday 22nd January 2014</option>
                            <option value = "Wednesday 29th January">Wednesday 29th January 2014</option>
                        </select>
                        </p>                
                    </p>

                    <p>
                        <label>
                            Name
                        </label>

                        <input name = "name" type = "text" id = "name">
                    </p>

                    <p>     
                        <label>
                            Organisation
                        </label>

                        <input name = "org" type = "text" id = "org">
                    </p>

                    <p>     
                        <label>
                            Email Address
                        </label>

                        <input name = "email" type = "text" id = "email">
                    </p>

                    <p id="divButtonBar">
                        <input type="submit" name="submit" value="Submit">
                    </p>

                </div>
            </div>

            <div class="footer">
                &copy;Property Tectonics 2014
            </div>
        </div>                  
    </form>

Validated by this JavaScript function which at the minute only checks to see if fields are empty or not:

<script>

    function validateForm() {
        if (validateDate()) {
            if (validateName()) {
                if (validateOrg()) {
                    if (validateEmail()) {
                        return true;
                    }
                }
            }
        }

        else { 
            return false;
        }
    }

    function validateDate(){
        var date = document.forms["form1"]["date"].value;

        if (date.trim().length == 0) {
            element = document.getElementById("date");
            alert("Please choose a date");
            element.focus();
            return false;
        }

        else {
            return true;
        }
    }

    function validateName(){
        var name = document.forms["form1"]["name"].value;

        if (name.trim().length == 0) {
            element = document.getElementById("name");
            alert("Please enter your name");
            element.focus();
            return false;
        }

        else {
            return true;
        }
    }

    function validateOrg(){
        var org = document.forms["form1"]["org"].value;

        if (org.trim().length == 0) {
            element = document.getElementById("org");
            alert("Please enter your organisation");
            element.focus();
            return false;
        }

        else {
            return true;
        }
    }

    function validateEmail(){
        var email = document.forms["form1"]["email"].value;

        if (email.trim().length == 0) {
            element = document.getElementById("email");
            alert("Please enter your email address");
            element.focus();
            return false;
        }

        else {
            return true;
        }
    }
</script>

Yet when I purposely leave fields blank the form still submits and progresses to email.php. Any help here? I just can't see the issue.

Thanks

Answer 1

This code:

function validateForm() {
        if (validateDate()) {
            if (validateName()) {
                if (validateOrg()) {
                    if (validateEmail()) {
                        return true;
                    }
                }
            }
        }

        else { 
            return false;
        }
    }

will only ever return false if validateDate() is false.

Instead try something like:

function validateForm() {
    if  (validateDate() && validateName() && validateOrg() && validateEmail() ) {
                    return true;
    }
    else { 
        return false;
    }
}

Answer 2

You don't have else clauses for many of your if statements:

function validateForm() {
    if (validateDate()) {
        if (validateName()) {
            if (validateOrg()) {
                if (validateEmail()) {
                    return true;
                } else {
                    return false;
                }
            } else {
                return false;
            }
        } else {
            return false;
        }
    }

    else { 
        return false;
    }
}

Or you could write it more simply as:

function validateForm() {
    if (validateDate() && validateName() && validateOrg() && validateEmail()) {
        return true;
    }
    else { 
        return false;
    }
}

Or even as:

function validateForm() {
    return (validateDate() && validateName() && validateOrg() && validateEmail());
}

Answer 3

if you're comfortable adding jQuery to this, you could use

$("#form1").submit(function(e) {
    e.preventDefault();
    if(validateForm()) {
         // submit the form
    }
});

see the example fiddle with jquery support: http://jsfiddle.net/2BmY8/

Answer 4

There is no else { return false; } else { return false; } condition for the validateName() , validateOrg() or validateEmail() structures. They don't explicitly return false , instead they do nothing (which is enough for the form to submit).