The PHP Forms Class: JavaScript

This is the second part of the Forms Classin the PHP Class series #1. In the first part we looked at the functions and variables found in the Forms class PHP file. Next up is to set up our custom JavaScript which will help us validating our form before it is submitted. The actual validation will be taken care of in part three, the PHP Forms Class: Validation.

Now, we know that AJAX and JavaScript is fancy, sadly not everybody (I think around 6% of the Internet users) don’t have JavaScript enabled. This JavaScript will therefore not work for these people, and that’s a shame! Maybe some day I will update this PHP class with a working non-JavaScript version.

The JS file we are going to work with is small, only 84 lines. It contains 6 functions, no global variables. We have the following functions to present:

• validate(): the function we will call from our form submit button
• check_field(): a help function to validate(). It will call our AJAX object.
• check_checkbox(): if a checkbox field is required this is where we check that.
• num_boxes(): counts how many fields of a specific type and name we have.
• _activeObject(): creates our ActiveXObject/XMLHttpRequest.
• _call: the active XMLHttpRequst function making the AJAX page call.

UPDATES: This code is no longer used in the PHP Form class. It has been replaced by a jQuery script handling the same functionality but with less code. You can read all about the Forms class jQuery update. This guide might still be interesting if you are looking for plain JavaScript actions without any interference with libraries!

That wasn’t much? We start with the validate() function. This is the function our form submit tag will call when we want to be validated. The function creates a error_list as a array and make sure we have a div tag to display our AJAX messages, this div tag is auto-generated via the Forms class draw() function. The function takes one parameter, the form we are going to validate. We will go through each field calling the check_field() function as soon as we find a field not matching submit, hidden or radio. Depending on the result of the check_field() function we will set an ‘error’ or ‘OK’ label on the field. When every form field has been validated our error_list array will be filled with all the possible errors. We will print out all errors in our div tag if we find any. The function will return true if the form is valid.

I said that the check_field() function was just a help function for the validate()function. The only thing it does is to fetch the value from the current field, if the field type is a checkbox we will see if any are checked using the check_checkbox() function. This is done because if the field is required we don’t have a value to match with if it’s empty. Lastly we call the _call() function.

I will not go through the check_checkbox() and num_boxes() functions that much. The only thing they do is:

• check_checkbox(): takes a form and a index. We loop through the form search for all other checkboxes with the same name and if they are checked. If they are checked we know that at if the field is required, that validation rule is approved.
• num_boxes(): takes a form, index and a type. This function can be used to find all similar form field types. We use this function when we start validating one checkbox and notice that it contains errors, then we want to jump over the remaining checkboxes with the same name since we know that they are invalid.

This function is simple and doesn’t need that much representing. It’s the standard way creating a ActiveXObject/XMLHttpRequest.

Lastly we are looking at the function making the AJAX request, the _call()function. It will take a full url as it’s ‘page’ parameter and use ‘GET’ to send the page and request the response text. This function uses the _activeObject to create our Request. The _call() function returns the text it recivies and it will end up in the error_list found in the first validate() function.

So there we have it. The JavaScript file for the Form Class. Remember we cannot use this script until the validation PHP page is done. Hang on, soon to come, the PHP Form Class: Validation.

• Download the full Forms Class
• Continue reading about the Forms Class
• Continue reading about the Forms Class Validation