Javascript form error array not registering

I have made a fiddle so you can test it for your yourself:

http://jsfiddle.net/ProjectV1/9XQtb/

Javascript

I have coded some simple validation and before the function created an array for form errors, at the end of the function there is an if statement that if any of the array == true then it prevents the event handler for the form submission.

The actual problem I have is that the form itself works and so does the error array but the if statement does not work for both the confirm inputs.

Try it yourself with the fiddle (I have added the result of the variable error for that input next to the input itself for ease of understanding);

RECREATE PROBLEM

To pass as error == false then the email must be valid, password over 6 characters, and username over 3 characters.

For example purposes I have pointed the form to google.

Form works for non confirm inputs

If you click on the input fields of email, password, and username, without ever selecting the confirm inputs and try to submit the form it will not as expected as the error variables return true. Then fill them out so that the errors return false without ever selecting the confirm input fields and the form will submit as expected as the error variables return false.

Form doesn't work for confirm inputs

But if you fill out all the form fields so that either or both of the confirm inputs contain an error then the form still submits even though the errors for that input field returns false.

The confirm inputs will only ever try to validate if the input it is confirming itself returns as false.

Why is this happening and how can I prevent it? Has it got something to do with the fact that the confirm inputs are nested in if else statements.

Javascript Code

$(document).ready(function() {

$('#joinForm input').blur(function() {
    var id = $(this).attr('id');
    joinAjax (id);
});

});

var errors = new Array();
errors[email] = null;
errors[cemail] = null;
errors[password] = null;
errors[cpassword] = null;
errors[username] = null;

function joinAjax (id) {

var val = $('#' + id).val();

if (id == 'email') {

    $('#emailMsg').hide();
    var reg = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;

    if (val == '') {
        errors[email] = true;
        $('#' + id).after('<div id="emailMsg" class="error">' + errors[email] + '</div>');
    }

    else if (reg.test(val) == false) {
        errors[email] = true;
        $('#' + id).after('<div id="emailMsg" class="error">' + errors[email] + '</div>');
    }

    else {
        errors[email] = false;
        $('#' + id).after('<div id="emailMsg" class="success">' + errors[email] + '</div>');
    }

    joinAjax('#cemail');

}

if (id == 'cemail') {

    $('#cemailMsg').hide();
    var reg = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
    var email = $('#email').val();

    if (reg.test(email) == true) {

        if (val != email) {
            errors[cemail] = true;
            $('#' + id).after('<div id="cemailMsg" class="error">' + errors[cemail] + '</div>');
        }

        else {
            errors[cemail] = false;
            $('#' + id).after('<div id="cemailMsg" class="success">' + errors[cemail] + '</div>');
        }

    }

    else {
        $('#cemail').val('');
    }
}

if (id == 'password') {

    $('#passwordMsg').hide();

    if (val == '') {
        errors[password] = true;
        $('#' + id).after('<div id="passwordMsg" class="error">' + errors[password] + '</div>');
    }

    else if (val.length < 6) {
        errors[password] = true;
        $('#' + id).after('<div id="passwordMsg" class="error">' + errors[password] + '</div>');
    }

    else {
        errors[password] = false;
        $('#' + id).after('<div id="passwordMsg" class="success">' + errors[password] + '</div>');
    }

    joinAjax('#cpassword');
}

if (id == 'cpassword') {

    $('#cpasswordMsg').hide();
    var password = $('#password').val();

    if (password.length >= 6) {

        if (val != password) {
            errors[cpassword] = true;
            $('#' + id).after('<div id="cpasswordMsg" class="error">' + errors[cpassword] + '</div>');
        }

        else {
            errors[cpassword] = false;
            $('#' + id).after('<div id="cpasswordMsg" class="success">' + errors[cpassword] + '</div>');
        }
    }

    else {
        $('#cpassword').val('');
    }        
}

if (id == 'username') {
    $('#usernameMsg').hide();

    if (val == '') {
        errors[username] = true;
        $('#' + id).after('<div id="usernameMsg" class="error">' + errors[username] + '</div>');
    }

    else if (val.length < 3) {
        errors[username] = true;
        $('#' + id).after('<div id="usernameMsg" class="error">' + errors[username] + '</div>');
    }

    else {
        errors[username] = false;
        $('#' + id).after('<div id="usernameMsg" class="success">' + errors[username] + '</div>');
    }
}

$('#joinForm').submit(function(event){
    if ((errors[email] == true) || (errors[cemail] == true) || (errors[password] == true) || (errors[cpassword] == true) || (errors[username] == true)) {
        event.preventDefault();
    }
    return true;
});

Working example

http://jsfiddle.net/ProjectV1/9XQtb/3/

CHANGES AFTER POINTYS ADVICE

var errors = {};
errors.email = true;
errors.cemail = true;
errors.password = true;
errors.cpassword = true;
errors.username = true;

function joinAjax (id) {

var val = $('#' + id).val();

if (id == 'email') {

    $('#emailMsg').hide();
    var reg = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;

    if (val == '') {

        $('#' + id).after('<div id="emailMsg" class="error">Enter your email</div>');
    }

    else if (reg.test(val) == false) {

        $('#' + id).after('<div id="emailMsg" class="error">Email invalid</div>');
    }

    else {

        errors.email = false;
        $('#' + id).after('<div id="emailMsg" class="success">Email OK</div>');
    }

    joinAjax('cemail');
}

if (id == 'cemail') {

    $('#cemailMsg').hide();
var email = $('#email').val();

    if (errors.email == false) {

        if (val != email) {

            $('#' + id).after('<div id="cemailMsg" class="error">Emails do not match</div>');
        }

        else {

            errors.cemail = false;
            $('#' + id).after('<div id="cemailMsg" class="success">Success</div>');
        }
    }

    else {

        $('#cemail').val('');
    }
}

if (id == 'password') {

    $('#passwordMsg').hide();

    if (val == '') {

        $('#' + id).after('<div id="passwordMsg" class="error">Enter a password</div>');
    }

    else if (val.length < 6) {

        $('#' + id).after('<div id="passwordMsg" class="error">Minimum length of 6</div>');
    }

    else {

        errors.password = false;
        $('#' + id).after('<div id="passwordMsg" class="success">Password OK</div>');
    }

    joinAjax('cpassword');
}

if (id == 'cpassword') {

    $('#cpasswordMsg').hide();
    var password = $('#password').val();

    if (errors.password == false) {

        if (val != password) {

            $('#' + id).after('<div id="cpasswordMsg" class="error">Passwords do not match</div>');
        }

        else {

            errors.cpassword = false;
            $('#' + id).after('<div id="cpasswordMsg" class="success">Success</div>');
        }
    }

    else {

        $('#cpassword').val('');
    }        
}

if (id == 'username') {

    $('#usernameMsg').hide();

    if (val == '') {

        $('#' + id).after('<div id="usernameMsg" class="error">Enter a username</div>');
    }

    else if (val.length < 3) {

        $('#' + id).after('<div id="usernameMsg" class="error">Minimum length is 3</div>');
    }

    else {

        errors.username = false;
        $('#' + id).after('<div id="usernameMsg" class="success">Username available</div>');
    }
}

$('#joinForm').submit(function(event){

    if ((errors.email == true) || (errors.cemail == true) || (errors.password == true) || (errors.cpassword == true) || (errors.username == true)) {
        event.preventDefault();
    }

    return true;
});
}

I addressed all of pointys advice, and added a few of my own changes.

1. I changed the default values of errors to true and only changed them if they needed them to be false. Making it so I didn't have to change it to true on an error.

2. Changed values inside div to display error messages.

3. Rather than checking on the confirm if the original input for confirm is valid against a regex or length, I just check to see if the value of the error was false or not.

Thanks every for your help, I hope peop开发者_Python百科le can learn from this.

---

This stuff here is incorrect:

errors[email] = null;
errors[cemail] = null;
errors[password] = null;
errors[cpassword] = null;
errors[username] = null;

What you want instead is:

errors.email = null;
errors.cemail = null;
errors.password = null;
errors.cpassword = null;
errors.username = null;

Same for all the other references. The first form (the incorrect form currently in your code) would work if "email", "cemail", "password", etc. were all variables with some values to be used as keys. As it is, they're not defined at that point. The second form uses those names as property names.

You could, alternatively, express the property names as strings and use brackets:

errors["email"] = null;
errors["cemail"] = null;
errors["password"] = null;
errors["cpassword"] = null;
errors['username'] = null;

Initializing those properties to null is not necessary anyway, really, unless your code is going to make a distinction between a missing property and a property that is present but with a null value. Later in your code, however, things get strange because you actually do define variables with those names and then continue to use them as indirect property name references. You might want to review the way object property reference syntax works in JavaScript. Oh, also, there's no need for an array anyway as you're not using numeric indexes. It should just be an object:

var errors = {};

edit Looking through the jsfiddle, there are some other problems. There are recursive calls to you "joinAjax" function that don't make sense; I can't even tell what they're supposed to do. Then, when you detect errors, you set the error flag to "true" but then also use that value directly in the error message you show (below I've fixed the incorrect property references):

        errors.email = true;
        $('#' + id).after('<div id="emailMsg" class="error">' + errors.email + '</div>');

I don't know what you want to happen, but that looks kind-of weird to me.