Question

I am performing basic form validation using the code below and am wanting to achieve the same result using an object initializer. I am looking at other ways of coding the validation of the form. I am unsure whether there is an added advantage in using an object as opposed to an array. This lack of knowledge is because I am new to the world of javascript.

Code

var formID = document.forms["webform"];
function validateForm() {
        var formFields = ["salutations", "fname", "lname"];
        var formLabel = ["Salutations", "First Name", "Last Name"];

        for(var i = 0; i < formFields.length; i = i + 1) {
            if (formID[formFields[i]].value.length == 0) {
                window.alert("The field " + formLabel[i] + " is empty");
                return false;
            }
        }

    }

Answer 1

OO is probably overkill for this. Reuse can be accomplished by passing the formFields and formLabels into validateForm:

function validateForm(form, fields, labels) {
    for(var i = 0, l=fields.length; i < l; i++) {
        if (form[fields[i]].value.length === 0) {
            alert("The field " + labels[i] + " is empty");
            return false;
        }
    }
}

You could also pass all the variables you need in as an object:

function alternateValidateForm(options) {
    var form = options.form,
        fields = options.fields,
        labels = options.labels;
    // The remainder of the code is the same
}

However, if you want / need an OO pattern then simply create a constructor function:

function Validator(fields, labels) {
     this.fields = fields;
     this.labels = labels;
}

Validator.prototype.validate = function(form) {
    // Same dance as before
}

This could then be used in this manner:

var validator = new Validator(["salutations", "fname", "lname"],
                              ["Salutations", "First Name", "Last Name"]);
var form = document.getElementById("webform");
validator.validate(form);