Form validation using dynamic event handlers. jQuery $.each() and bind()

signup.php

<script type='text/javascript'>
    // the validate.js content goes here.
</script>

<p>
    <button value='' onClick='testFormValidation()'>fill with test data</button>
    <br />
    <button value='' onClick='clearForm()'>Clear Form Data</button>
</p>

<form method='POST' action='<?php echo $_SERVER['PHP_SELF']; ?>?menu_key=3' name='userDetails' id='userDetails'>
<table cellpadding='10'>
    <tr>
        <td>First Name:</td>
        <td><input type='text' name='first_name' id='firstname' /></td>
        <td><span id='firstnameerrors'></span></td>
    </tr>
    <tr>
        <td>Middle Initial:</td>
        <td><input type='text' size='3' name='middle_name' id='middlename' /></td>
        <td><span id='middlenameerrors'></span></td>
    </tr>
    <tr>
        <td>Last Name:</td>
        <td><input type='text' name='last_name' id='lastname' /></td>
        <td><span id='lastnameerrors'></span></td>
    </tr>
    <tr>
        <td>Address Line 1:</td>
        <td><input type='text' name='addy_1' id='addy1' /></td>
        <td><span id='addy1errors'></span></td>
    </tr>
    <tr>
        <td>Address Line 2:</td>
        <td><input type='text' name='addy_2' id='addy2' /></td>
        <td><span id='addy2errors'></span></td>
    </tr>
    <tr>
        <td>City:</td>
        <td><input type='text' name='city' id='city' /></td>
        <td><span id='cityerrors'></span></td>
    </tr>
    <tr>
        <td>State:</td>
        <td><input type='text' size='3' name='state' id='state' /></td>
        <td><span id='stateerrors'></span></td>
    </tr>
    <tr>
        <td>Zip code:</td>
        <td><input type='text' name='zip' id='zip' /></td>
        <td><span id='ziperrors'></span></td>
    </tr>
    <tr>
        <td>Username:</td>
        <td><input type='text' name='username' id='username' /></td>
        <td><span id='usernameerrors'></span></td>
    </tr>
    <tr>
        <td>Password:</td>
        <td><input type='text' name='password1' id='password1' /></td>
        <td><span id='password1errors'></span></td>
    </tr>
    <tr>
        <td>Password again:</td>
        <td><input type='text' name='password2' id='password2' /></td>
        <td><span id='password2errors'></span></td>
    </tr>
    <tr>
        <td>Email:</td>
        <td><input type='text' name='email' id='email' /></td>
        <td><span id='emailerrors'></span></td>
    </tr>
    <tr>
        <td><input type='submit' value='submit'</td>
        <td>&nbsp;</td>
        <td><span style='color:red;' id='userDetailsErrors'></span></td>
    </tr>
</table>
</form>

validate.js

var isError = false;
        var arrFieldNameError = [];
        
        // section for active validation
        var arrFields = ['#firstname', 
                        '#middlename', 
                        '#lastname', 
                        '#addy1', 
                        '#addy2', 
                        '#city',
                        '#state',
                        '#zip',
                        '#username',
                        '#password1',
                        '#password2',
                        '#email'
                        ];
        var errorFields = ['#firstnameerrors', 
                            '#middlenameerrors', 
                            '#lastnameerrors', 
                            '#addy1errors', 
                            '#addy2errors',
                            '#cityerrors',
                            '#stateerrors',
                            '#ziperrors',
                            '#usernameerrors',
                            '#password1errors',
                            '#password2errors',
                            '#emailerrors'
                            ];
        var minLengths = [1, 0, 1, 1, 0, 1, 2, 5, 6, 6, 6, 5];
        var maxLengths = [20, 1, 30, 100, 100, 30, 2, 10, 40, 20, 20, 100];
    
    
    $(document).ready(function() {
                        
        $.each(new Array(arrFields.length),function(i) {
            
            // pull out each thing we need from the iterator.
            var field = arrFields[i];
            var error = errorFields[i];
            var maxlen = maxLengths[i];
            var minlen = minLengths[i];
            
            //console.log("Binding: " + field + " to error:" + error);
            
            $(field).bind("keyup", function() {
                // reset these for the final validator
                isError = false;
                arrFieldNameError = [];
                
                console.log("firing for: " + field);
                var f = $(field).val();
                var lenField = f.length;
                console.log("length: " + lenField);
                
                var id = $(this).attr('id');
                $(error).empty().append(lenField + "/" + maxlen);
                if(lenField > maxlen) {
                    $(error).empty().append("Too long!");
                    isError = true;
                    arrFieldNameError.push(id);
                    }
                if(lenField < minlen) {
                    $(error).empty().append("Too short!");
                    isError = true;
                    arrFieldNameError.push(id);
                    }
                    
                // name
                console.log("this.id:" + $(this).attr('id'));
                if($(this).attr('id') == "state") {
                    // do re for state:
                    console.log("Validating state");
                    var re = /[a-z]/i;
                    if(re.test(f) && f.length == 2) {
                        $(error).empty().append("Good!");
                    } else {
                        $(error).empty().append("BAD!");
                    }
                }
                }); // end bind
                
        });// end loop
        
        
        // section for submission validation
        $('#userDetails').submit( function(event) {
            var flag = true;
            var errors = "";
            
            // validate password.
            var p1 = $('#password1').val();
            var p2 = $('#password2').val();
            if(!(p1 === p2)) {
                flag = false;
                errors += "Passwords don't match! ";
            }
            if(p1.length > 20 || p1.length < 6) {
                flag = false;
                errors = "Password is an invalid length. ";
            }
            
            // username:
            var username = $('#username').val();
            if(username.length < 6 || username.length > 40) {
                flag = false;
                errors += "Username in an invalid length. ";
            }
            
            // zipcode:
            var zip = $('#zip').val();
            var reZip = /[0-9]/;
            if(reZip.test(zip) != true) {
                flag = false;
                errors += "Zipcode is not numeric! ";
            }
            
            // validate state:
            var state = $('#state').val();
            var re = /[a-z]/i;
            if(!(re.test(state) && state.length == 2)) {
                errors += "State is invalid. ";
                flag = false;
            }
            
            
            // generic error
            /***  Not using this, did in a diff way.
            if(isError) {
                console.log("Field Legth Error");
                errors += "Length error in fields: ";
                for(var i = 0; i < arrFieldNameError.length; i++) {
                    errors += arrFieldNameError[i];
                    if(!(i + 1 == arrFieldNameError.length)) {
                        errors += ",";
                    }
                }
            }
            ***/
            // email:
            var email = $('#email').val();
            var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
            if(!(emailExp.test(email))){
                errors += "Email Address is invalid. ";
                flag = false;
            }
            
            // cannot be empty:
            var arrCantBeEmpty = ['#firstname', 
                        '#lastname', 
                        '#addy1', 
                        '#city',
                        '#state',
                        '#zip',
                        '#username',
                        '#password1',
                        '#password2',
                        '#email'];
            for(var i = 0; i < arrCantBeEmpty.length; i++) {
                var f = arrCantBeEmpty[i];
                var value = $(f).val();
                if(value.length < 1) {
                    flag = false;
                    errors += f + " cannot be empty! ";
                    console.log("This was empty: " + f);
                }
            }
            
            // prevent event.
            if(flag == false) {
                event.preventDefault();
                $('#userDetailsErrors').empty().append(errors);
                console.log("preventing default");
            }
        });
    });
    // edith1995
    
    function testFormValidation() {
        $(arrFields[0]).val("John");
        $(arrFields[1]).val("C");
        $(arrFields[2]).val("Smith");
        $(arrFields[3]).val("123 Lost Lane");
        $(arrFields[5]).val("New York");
        $(arrFields[6]).val("NY");
        $(arrFields[7]).val("12345");
        $(arrFields[8]).val("coolUsername");
        $(arrFields[9]).val("password");
        $(arrFields[10]).val("password");
        $(arrFields[11]).val("lol@lol.com");
    }
    
    function clearForm() {
        $(arrFields[0]).val("");
        $(arrFields[1]).val("");
        $(arrFields[2]).val("");
        $(arrFields[3]).val("");
        $(arrFields[5]).val("");
        $(arrFields[6]).val("");
        $(arrFields[7]).val("");
        $(arrFields[8]).val("");
        $(arrFields[9]).val("");
        $(arrFields[10]).val("");
        $(arrFields[11]).val("");
    }