PHP Form Class with jQuery

Time flies! It’s been almost two weeks since I last wrote anything. Not good! Today I’m back with some really awesome news: the PHP Form Class has been updated with the jQuery library and I have re-written the JavaScript code we used in the validation before so it’s now with the jQuery standards. Why did I do this? Well, it’s cool, a lot easier to read, less code and oh again it’s very cool. If you don’t know what jQuery is, check out the link below:

“jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages.”
http://jquery.com/

jQuery is really sweet and truly easy to learn and use. If you are working with JavaScript alot, you should definitely give jQuery a chance to change your life, to the better! . Except for the jQuery validation update I have also looked into more validation rules and now we are able to set the minimum or maximum required checkboxes a user needs to check before submitting. The whole Form class can be downloaded at the bottom of the page!

OK, we start with the jQuery script:

jQuery Form validation

The code might look rather confusing if you never have had a change to look at jQuery. We will go through it nice and easy. The very line (document).ready(function() {is a required line to get the jQuery to work. Basically it says: When the document is done loading, apply this. “this” is the code we have implemented above. The next line $('form.formoo').submit(function() {is saying that, for every form tag with formoo as class, apply this function when the form is submitted. Fancy, isn’t it? Inside the function we are getting formation about the form, the log and more. The $(:input, form).each(function(i) { line is looping through the form we currently are in and are validating each :input. The :inputis every possible, valid, tag you can find in a form. So this will go through text, password, textareas, checkboxes, selects and radio.

Next up, we don’t need to validated hidden, submit or radio inputs. If we find a checkbox to validated we count the number of checked boxes. The make our ajax call using the $.ajax method. Depending on the result we are adding error classes to the fields, adding the patrol text and check if the form is valid or not. At the end we return true or false. Basically nothing is new here, code wise, if you compare it to the validation we had before, except for one thing. Instead of gathering everything in a box below the form we are now adding a error message underneath the input form itself. This is done before it will hopefully be even easier to see which fields are causing the errors. In this update I will also include the .css file I’m using. As you can see this update requires fields to be given certain class names. And about the name, formoo, I’m usually called moo and since this is a form and I couldn’t just named it form, it became formoo. Although it has nothing todo with the moo library!

We move to the Validation.php file where we also have some updates. In the validateField()method we want to see the user have selected or checked as many checkboxes or selects s/he is required to. This is easily done using the min and max validation rule we used before, no new validation rules need to be written. Just a few lines with already built-in code:

Form validateField()

Man we are moving fast! Our Form.php file also need a update check. Before I forget, I have actually included a new attribute. When you have a select input you are now able to set a ’selected’ tag with a value. If this value matches anything in the array of values in the select it is selected, pretty useful when creating editing pages etc. This update is make in the createField() method. Another rather important update is when auto-generating a form using the generate() method. Before we wasn’t able to fetch a default value, now we can! This change was done in the generate() method. We also removed a few lines of code in the create()method. We no longer need the onClick part of the submission. We trash that and instead we add class='formoo' instead.

Our Form class is now over 230 lines, sweet! Well I think that’s it. I will include a example on how to use the newly created features, everything will be available in the download. Until next time, enjoy this update! Let me know if you have any use for it or if you need any help I’m available at niklas [at] cdos [dot] org 24/7. Take care now! Out!

Form class validation example

• Download the Form validation class including jQuery and CSS