Validating many fields with different types with JavaScript

When you submit a form you need to validate your fields before continuing in order to know if the data is correct. One common way of doing so it is to validate them one by one which works fine but could be hard to read and takes up some space.

Another way is to first define the field names, their labels and type and then validate them all at the same type and get only one notification with all errors. Here's a little something I wrote that helps me out.

Above a form with four fields and a button. When clicked on I want the fields to validate, but they need to be validated on different things. The name and description field must not be an empty string, the age field must be a number and the Web field has to be an url.

So we have some HTML that looks like this:

<form>
<table style="margin:40px">
<tr>
<td style="width:100px">Name: </td>
<td><input type="text" id="fld_name" /></td>
</tr>
<tr>
<td>Age: </td>
<td><input type="text" id="fld_numYears" /></td>
</tr>
<tr>
<td>Web: </td>
<td><input type="text" id="fld_url" /></td>
</tr>
<tr>
<td>Description: </td>
<td><input type="text" id="fld_description" /></td>
</tr>
<tr>
<td colspan="2">
<br />
<input type="button" onclick="checkFieldsAndSubmit()" value="Check" />
</td>
</tr>
</table>
</form>

First the function that defines the fields, their labels and their type and the call to the actual validation function. If the validation goes ok we move on with for example submitting the form. Else some notification according to the validation function.

function checkFieldsAndSubmit() {
var fldArray = new Array();
var labelArray = new Array();
var valTypeArray = new Array();

// Define fields here
fldArray[0] = "fld_name";
labelArray[0] = "Name";
valTypeArray[0] = "isEmptyString";

fldArray[1] = "fld_numYears";
labelArray[1] = "Age";
valTypeArray[1] = "isNumber";

fldArray[2] = "fld_url";
labelArray[2] = "Web";
valTypeArray[2] = "isUrl";

fldArray[3] = "fld_description";
labelArray[3] = "Description";
valTypeArray[3] = "isEmptyString";

if (validateFields(fldArray, labelArray, valTypeArray)) {
alert("Submitting form...");
}
}

The validation function. As you can see we can easily add another type of validation and how a specific field is suppose to validate: