Bij formuliervalidatie worden de formuliervelden door validatieregels gecontroleerd. Dit gebeurd op vrijwel alle formulieren op deze website met een POST request :

Het nadeel hiervan is dat bij elke keer dat het formulier verzonden wordt de pagina opnieuw geladen moeten worden.

Wat we willen bereiken is dat het formulier op de achtergrond wordt verstuurd.

We gebruiken het contactformulier als voorbeeld.

Dit doen we door als eerste een jQuery Click Event te plaatsen op de "Verstuur" button :

$('#contact #submit_contact').click(function() { // todo : jQuery POST request });

Dit event voert vervolgens een jQuery POST request uit :

var name = $('#name').val();
var email = $('#email').val();
var feedback = $('#feedback').val();
var captcha = $('#captcha').val();
$.post("contact/validate_ajax", { name: name, email: email, feedback: feedback, captcha: captcha },
function(response){
	if(response=='1'){
		// todo : formulier versturen
	} else {
		// todo : foutenlijst genereren
	}
});

Het antwoord zijn de validatiefouten in XML formaat :

<![CDATA[Naam is verplicht.]]>
<![CDATA[E-mailadres is verplicht.]]>
<![CDATA[Opmerking is verplicht.]]>
<![CDATA[Bevestigingscode is onjuist.]]>

Met dit XML antwoord wordt boven het formulier een foutenlijst gegenereerd :

$('#contact #validation').fadeIn('slow');
var list = '';
list += '
';
$(response).find('error').each(function(){
	var id = $(this).attr("id");
	var error = $(this).text();
	$('#'+id).addClass('validate_error');
	list += '
';
	list += '' + error + ''; 
	list += '
';
});
list += '
';
$("#contact #validation").html(list);

De <LABEL> -tag wordt gebruikt indien er op de validatiefout wordt geklikt, de cursor naar het invoerveld gaat.

Voor elke validatiefout wordt bij het formulierveld de CSS class "validate_error" toegevoegd, hierdoor krijgt deze een opvallende achtergrond.

De CSS class "validate_error" wordt van het formulierveld verwijderd als deze focus krijgt :

$('.validate_error').live('focus', function() {
	$(this).removeClass('validate_error');
});

Indien er geen validatie fouten zijn wordt er "1" als antwoord geretourneerd.

Het formulier wordt nu nog een keer verstuurd met een jQuery POST request :

$.post("contact/post_ajax", { name: name, email: email, feedback: feedback, captcha: captcha },
function(response){
	if(response=='1'){
		$('#contact #confirmation').fadeIn('slow');
		$('#contact #form').hide();
	}
});

Als laatst wordt het formulier verborgen en een bevestigingstekst wordt getoond :