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函數進行驗證，該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;
    }
}

Answer 2

您的許多if語句都沒有else子句：

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

    else { 
        return false;
    }
}

或者，您可以將其編寫為：

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

甚至作為：

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

Answer 3

如果您願意在其中添加jQuery，則可以使用

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

請參閱帶有jquery支持的小提琴示例： http : //jsfiddle.net/2BmY8/

Answer 4

沒有else { return false; } else { return false; } validateName() ， validateOrg()或validateEmail()結構的條件。 他們沒有顯式地返回false ，而是什么也不做（足以提交表單）。