Form validation techniques

During my training as PHP Developer I've learned several ways to validate form input. I copy-pasted 3 of them here.

Form validation with PHP

Description

What example is better than a real-life example? The contact form on my website uses PHP form validation! When submitted, you will get a succes or error message above the form. The form needs to submit to the same page if you want to show the feedback.(Notice that this version of the form does not send me e-mails... my mailbox would be fully spammed :o))

Implementation

Contact

Form validation with JavaScript

Description

An example of a JavaScript form validation script is the 'Birdy Airways - book a flight' form which was an exercise during my course at VDAB. It uses an object which contains a test and an error message for different classes. To use it, simple add the classes (so in fact checks) you want to the html element. When a user presses the submit button you first perform the form check and only if there are no errors you post the form variables to their destination page. The form validator iterates over all elements of the form and checks if there are matching classes. When errors are found, these are inserted after the object that contains the error. The form submits to a general testing page that shows all GET data.

Implementation

Birdy Airways: boek uw vlucht

Alle waarden worden (indien er geen fouten zijn) ter controle doorgestuurd naar js_form_ontvanger.htm, er is geen backend aanwezig.

Login gegevens

Uw Vlucht



Passagiers



Form validation with jQuery

Description

To try what is possible with jQuery, an exercise during ma course at VDAB called 'de Plantenshop' had to be enriched with fancy jQuery stuff. Form validation of the registration form was one of those enrichments. It uses the standard jQuery method, html5 placeholders are also used in this example. (Notice that these will not be visible if the browser does not support html5! You can find several fallback methods in JavaScript when you search the internet... not implemented in the example) The form submits to a general testing page that shows all GET data.

Implementation

de PlantenShop: registreer

Verplichte velden zijn aangeduid met een asterisk (*).

Uw persoonlijke gegevens

Uw groene keuzes

uw ruimte is een

Aanmelding

Bevestig