Javascript Validation

[as4s1n]

I am writing a validation script and I need it not to go to the page which it would if the form was correct when it isn't. I think it has something to do with the action attribute of the form element, however, I've already used return false

JS:

function validateForm(help) {
    var 
        inputs = document.forms[0].elements,
        errors=[],
        help = document.getElementById(help);
    for(var i=0;i>inputs.length;i++) {
        if(inputs[i].value.length == 0) {
            errors.push("Invalid Value:"+this.name);
        }
    }
    if( errors.length > 0 
        || inputs[2] != inputs[3] 
        || inputs[4] != inputs[5]
        || inputs[6].checked == false 
        && inputs[7].checked == false) {

        inputs[10].disabled = true;
        help.innerHTML = "Either your form is incomplete or there is a problem. "+errors;
        return false;

    } else {
        inputs[10].disabled = false;
        help.innerHTML = "";
        document.forms[0].submit();
        return true;
    }
}

HTML form:

<form action="index.php" method="post" enctype="multipart/form-data" id="register" name="register">
<table border="0">
    <tr>
        <td>Username:</td>
        <td><input type="text" name="username" size="12" /></td>
    </tr><tr>
        <td>Password:</td>
        <td><input type="password" name="password" size="12" /></td>
    </tr><tr>
        <td>Confirm Password:</td>
        <td><input type="password" name="confirmEmail" size="12" /></td>
    </tr><tr>
        <td>Email:</td>
        <td><input type="text" name="email" size="40" /></td>
    </tr><tr>
        <td>Confirm Email:</td>
        <td><input type="text" name="confirmEmail" size="40" /></td>
    </tr><tr>
        <td>Gender:</td>
        <td>
            <table border="0">
                <tr>
                    <td><label><input type="radio" name="gender" value="0" />Male</label></td>
                    <td><label><input type="radio" name="gender" value="1" />Female</label></td>
                </tr>
            </table>
        </td>
    </tr><tr>
        <td>Location:</td>
        <td><input type="text" name="location" size="50" /></td>
    </tr><tr>
        <td>Avatar:</td>
        <td><input type="file" name="avatar" /></td>
    </tr><tr>
        <td colspan="2"><input type="submit" value="Register" /><input type="hidden" name="page" value="users/addUser" /></td>
    </tr>
</table>
</form>
<span id="help"></span>

[lemon-tree]

Is the script actually executing? It looks to me like you have a load of newlines that shouldn't be there. I haven't bothered looking at the rest for the moment, but try this first:

function validateForm(help) {
var inputs = document.forms[0].elements,
errors= new Array(),
help = document.getElementById('help');
for(var i=0;i>inputs.length;i++) {
if(inputs[i].value.length == 0) {
errors.push("Invalid Value:"+this.name);
}
}
if(errors.length > 0 || inputs[2] != inputs[3] || inputs[4] != inputs[5] || inputs[6].checked == false && inputs[7].checked == false) {

inputs[10].disabled = true;
help.innerHTML = "Either your form is incomplete or there is a problem. "+errors;
return false;

} else {
inputs[10].disabled = false;
help.innerHTML = "";
document.forms[0].submit();
return true;
}
}

[dlukin]

Where do you attach the function to the form?

[as4s1n]

Sorry, it was a copy error. The register button has an onclick event with that. It still doesn't work.

[misson]

You also need to hook the form's submit event. If you're using inline registration, it needs to return the function's result.

<form onsubmit="return validate(this);" ...

If you're using DOM registration (such as provided by jQuery's event system), you need to call Event.preventDefault in your handler.

// jQuery
function validate (event) {
    // 'this' is the form
    var inputs = this.elements,
    ...
    if (errors.length) {
        event.preventDefault();
        // return false so that handler can also be used inline
        return false;
    }
    ...
}
...
form.submit(validator);