e.preventDefault(); not stopping form submission

Question

I'm working on a simple form validation script, that just checks fields aren't empty to begin with (further advanced validation will be added later).

However, on submission, the form seems to continue to submit, even though I am using preventDefault() . Could someone check my syntax and my logic for me please, figure out what's going wrong? I get a flash of the validation before the form submits as normal.

Fiddle: http://jsfiddle.net/qb9KS/1/

HTML

<form id="userForm" method="POST" action="form-process.php">
    <div>
        <fieldset>
            <legend>User Information</legend>

            <div id="errorDiv"></div>

            <label for="name">Name:*</label>
            <input type="text" id="name" name="name" />
            <span class="errorFeedback errorSpan" id="nameError">Name is required</span>

            <br />

            <label for="city">City:</label>
            <input type="text" id="city" name="city" />

            <br />

            <label for="state">State:</label>
            <select id="state" name="state">
                <option></option>
                <option>Alabama</option>
                <option>California</option>
                <option>Colorado</option>
                <option>Florida</option>
                <option>Illinois</option>
                <option>New Jersey</option>
                <option>New York</option>
                <option>Wisconsin</option>
            </select>

            <br />

            <label for="zip">ZIP:</label>
            <input type="text" id="zip" name="zip" />

            <br />

            <label foe="email">Email Address:*</label>
            <input type="text" id="email" name="email" />
            <span class="errorFeedback errorSpan" id="emailError">Email is required</span>

            <br />

            <label for="phone">Telephone Number:</label>
            <input type="text" id="phone" name="phone" />
            <span class="errorFeedback errorSpan" id="phoneError">Format: xxx-xxx-xxxx</span>

            <br />

            <label for="work">Number Type:</label>
            <input class="radioButton" type="radio" name="phoneType" id="work" value="work" />
            <label class="radioButton" for="work">Work</label>
            <input class="radioButton" type="radio" name="phoneType" id="home" value="home" />
            <label class="radioButton" for="home">Home</label>
            <span class="errorFeedback errorSpan" id="phonetypeError">Please choose an option</span>

            <br />

            <label for="password1">Password:*</label>
            <input type="password" id="password1" name="password1" />
            <span class="errorFeedback errorSpan" id="password1Error">Password required</span>

            <br />

            <label for="password2">Verify Password:*</label>
            <input type="password" id="password2" name="password2" />
            <span class="errorFeedback errorSpan" id="password2Error">Passwords don't match</span>

            <br />

            <input type="submit" id="submit" name="submit">
        </fieldset>
    </div>
</form>

Javascript

$(document).ready(function() {
$("#userForm").submit(function(e) {
    removeFeedback();
    var errors = validateForm();
    if (errors == "") {
        return true;
    }
    else {
        provideFeedback(errors);
        e.preventDefault();
        return false;
    }
});

function validateForm() {
    var errorFields = new Array();
    if ($('#name').val() == "") {
        errorFields.push('name');
    }
    if ($('#email').val() == "") {
        errorFields.push('email');
    }
    if ($('#password1').val() == "") {
        errorFields.push('password1');
    }
    return errorFields;
}

function provideFeedback(incomingErrors) {
    for (var i = 0; i < incomingErrors.length; i++) {
        $("#" + incomingErrors[i]).addClass("errorClass");
        $("#" + incomingErrors[i] + "Error").removeclass("errorFeedback");
    }
    $("#errorDiv").html("Errors encountered");
}

function removeFeedback() {
    $("#errorDiv").html("");
    $('input').each(function() {
        $(this).removeClass("errorClass");
    });
    $('.errorSpan').each(function() {
        $(this).addClass("errorFeedback");
    });
}
});

Answer 1

It should be...

$("#" + incomingErrors[i] + "Error").removeClass("errorFeedback");

... instead. As jQuery object doesn't have removeclass method (and case does matter in JS), this function fails with an error, and neither e.preventDefault() nor return false lines are invoked.

The bottom line: always check JS console for errors, it'll save you A LOT of time and nerves. )

Answer 2

Try checking the array.length instead of =

$(document).ready(function() {

    $("#userForm").submit(function(e) {

      if (errors.length >0) {
            return true;
       }
    }

}

you also typo error in removeClass

$("#" + incomingErrors[i] + "Error").removeClass("errorFeedback");