JavaScript 验证失败但表单仍提交

Question

我有以下 HTML 表单来接受用户输入:

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

通过此 JavaScript 函数进行验证，该函数目前仅检查字段是否为空:

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

然而，当我故意将字段留空时，表单仍然会提交并进展到 email.php。这里有什么帮助吗？我只是看不出问题所在。

谢谢

Answer 1

这段代码:

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

        else { 
            return false;
        }
    }

只有当 validateDate() 为 false 时才会返回 false。

尝试类似的方法:

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