CODEWITHSUNDEEP
javascriptphphtmlforms
Tiffany
Tiffany

Reputation: 237

JavaScript validation fails but form still submits

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

Upvotes: 0

Views: 140

Answers (4)

GhostInTheSecureShell
GhostInTheSecureShell

Reputation: 1010

There is no 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).

Upvotes: 0

Digital Chris
Digital Chris

Reputation: 6202

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

Upvotes: 3

Barmar
Barmar

Reputation: 782624

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());
}

Upvotes: 1

j-mo
j-mo

Reputation: 142

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/

Upvotes: 0

Related Questions