jQuery Contactform Validation

In deze blog laat ik zien hoe je een formulier gemaakt met de CMS Made Simple Form Builder module via JavaScript kunt controleren. Hierbij wordt dankbaar gebruik gemaakt van de JQuery plugin "validation".

Met de CMS Made Simple module Form Builder kan je op een eenvoudige wijze mailformulieren maken. Form Builder beschikt over verschillende PHP functies die het controleren van formulier gegevens aan de kant van de server (server-side) mogelijk maakt.

Met JavaScript is het controleren van formuliergegevens aan de kant van de webbrowser (client-side) mogelijk. Een voordeel hiervan is dat invulfouten direct gesignaleerd kunnen worden en het mailformulier niet bij iedere fout opnieuw ingeladen hoeft te worden. Dit verhoogt de responstijd.

Stap: 1 Installeer Form Builder

• /admin: Uitbreidingen -> Module Manager -> [Beschikbare Modules]-tab : F
• Form Builder : Downloaden & Installeren

Stap: 2 Download en installeer JQuery

Als je website nog geen gebruik maakt van JQuery zorg er dan voor dat Jquery beschikbaar is.

• Ga naar: http://docs.jquery.com/Downloading_jQuery
• Download de laatste versie van JQuery
• Maak binnen je CMS Made Simple installatie een map aan met bijvoorbeeld de naam 'js'
• Kopieer jquery.min.js naar de 'js' map
• Koppel het jquery.min.js bestand aan de template (/admin: Opmaak -> Sjablonen) waarop je het Form Builder formulier wilt tonen.

<script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

Stap: 3 Download en installeer JQuery plugin validation

• Ga naar: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
• Download het jquery-validation .zip bestand
• Pak het .zip bestand uit met je favoriete zip tool
• Maak binnen je CMS Made Simple installatie een map aan met bijvoorbeeld de naam 'js'
• Kopieer jquery.validate.min.js naar de 'js' map
• Koppel het jquery.validate.min.js bestand aan de template (/admin: Opmaak -> Sjablonen) waarop je het Form Builder formulier wilt tonen.

<script src="/js/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>

Stap 4 Controle regels toevoegen aan je Form Builder formulier

Met de JQuery plugin validation is het mogelijk om formulier gegevens te controleren op invoer. Wanneer je bijvoorbeeld een veld hebt waar een e-mailadres ingevuld kan worden. Wil je graag weten of er een waarde is ingevoerd (required: true) en of de dit werkelijk een e-mailadres (email: true) betreft.

Als er niets is ingevuld wil je graag de melding: "Vul E-mailadres in." krijgen. Als het e-mailadres fout is ingevuld wil je: "Vul een geldig E-mailadres in." tonen.

Velden die in de Form Builder module aangemaakt zijn hebben een uniek veld-id deze kan je zichtbaar maken via:

Maak veld-id's zichtbaar:

• Uitbreidingen -> Form Builder [Configuratie]
• Toon veld-id's:
  [x] Dit aanklikken maakt het tonen van veld-id's mogelijk tijdens toevoegen en wijzigen van een formulier

Maak een nieuw "test" formulier aan met een "e-mail" veld:

• Ga hierna naar Uitbreidingen -> Form Builder [Formulieren] en voeg een nieuw formulier toe.
• Noem deze "test".
• Klik op "Ga naar de geavanceerde modus" en voeg een veld toe van het type: "E-mail naar het opgegeven e-mailadres".
• Klik op toevoegen.

Opslaan van JQuery validatie regels

Elk Form Builder veld kent een [Geavanceerde instellingen] tab. Onder Smarty gegevens of logica die is bedoeld om te worden verzonden met dit veld, gaan we validatie regels plaatsen.

Ga terug naar het "test" formulier, zoek het veld-id van het zojuist aangemaakte veld op in mijn voorbeeld is dit "29" en bewerk dit veld.

{strip}
{php}

$jquery_validator =  new stdClass;

$j_validator = new stdClass;
$j_validator->rules = "required: true, email: true";
$j_validator->messages = "required: 'Vul E-mailadres in.', email: 'Vul een geldig E-mailadres in.'";
$jquery_validator->fbrp__29 = $j_validator;

$j_validator = new stdClass;
$j_validator->rules = "";
$j_validator->messages  = "";
$jquery_validator->fbrp__XX = $j_validator;

$this->assign("jquery_validator", $jquery_validator);

{/php}
{/strip}

Stap: 5 Form Builder Validator HTML-blok (GCB)

Nu de validatie regels aan het Form Builder formulier gekoppeld zijn gaan we een HTML-blok toevoegen. Hiermee wordt JQuery validation javascript code gegenereerd.

• Ga naar Inhoud -> HTML-blokken
• Klik op HTML-blok toevoegen
• Naam: FormBuilderValidator
• [] Gebruik WYSIWYG uit

Inhoud:
Verander in onderstaande code fragment: [literal] in {literal} en [/literal] in {/literal}

{strip}

{* this_form_name *}
{assign var=x value="method"|explode:$fb_form_start} 
{capture assign='x'}{$x[0]|regex_replace:'/"/':''}{/capture}
{assign var=x value="id="|explode:$x} 
{assign var=this_form_name value=$x[1]}
{* /this_form_name *}

{* this_form_alias *}
{assign var=x value="moduleform_"|explode:$this_form_name} 
{assign var=this_form_alias value=$x[0]}
{* /this_form_alias *}

[literal]

<script type="text/javascript">

$.validator.setDefaults({

    invalidHandler: function(form, validator) {
    
        var errors = validator.numberOfInvalids();
        
        if (errors) {
            var message = errors == 1
            ? '<b>1 veld is niet correct.</b><br />'
            : '<b>'+ errors + ' velden zijn niet correct.</b><br /><ul>';
        
            $.each(validator.errorMap, function(index, value) { 
                message = message.concat('<li>', value, '</li>');
            });
            
            message = message.concat('</ul>');
            
            $(".error_message .error").html(message);
            $(".error_message").show().fadeOut(10000);
        
        } else {
            $(".error_message").hide();
        }
    }
    
});

$().ready(function() {
        
$("#[/literal]{$this_form_alias}[literal]fbrp_submit").click(function() {
        //alert('hi');
});        
        
$("#[/literal]{$this_form_name}[literal]").validate({  
        
        errorElement : "div",
        errorClass: "error",
        errorPlacement: function(error, element) {
            //error.appendTo( element.parent("div") );
        },
        rules: {
            [/literal]
 
{capture assign='rules'}
{foreach from=$fields item=entry}
    {assign var='key' value=$entry->input_id}
    {if $jquery_validator->$key->rules != ''}
    {$this_form_alias}{$key}: {ldelim} {$jquery_validator->$key->rules} {rdelim},  
    {/if}
{/foreach}
{/capture}

{$rules|regex_replace:"/,$/":""} 

            [literal]
        },
        messages: {
            [/literal]

{capture assign='messages'}
{foreach from=$fields item=entry}
    {assign var='key' value=$entry->input_id}
    {if $jquery_validator->$key->messages != ''}
    {$this_form_alias}{$key}: {ldelim} {$jquery_validator->$key->messages} {rdelim},  
    {/if}
{/foreach}
{/capture}

{$messages|regex_replace:"/,$/":""}

            [literal]
        }

});
	
});
</script>

[/literal]
{/strip}

Stap: 6 FormBuilderValidator koppelen aan de Form Builder template

• Ga naar Uitbreidingen -> Form Builder
• Klik op het 'test' formulier
• Klik op de [Formuliersjabloon] tab
• Voeg aan de bovenkant van de template de volgende regel toe:

{global_content name='FormBuilderValidate'}

Voeg boven {$fb_form_header} de volgende code toe:

<div class="error_message" style="display: none;">
<span class="error"></span>
</div>

{$fb_form_header}

Stap: 7 Form Builder formulier toevoegen aan content pagina

• Ga naar Inhoud -> Pagina's
• Klik op Nieuwe inhoud toevoegen
• Geef een titel en menutekst op
• Onder inhoud roep je het Form Builder 'test' formulier aan: {FormBuilder form='test'}

Stap: 8 Form Builder CSS aanpassen

Wanneer de JQuery validation plugin een invulfout detecteert plaatst deze op de class van het invul veld de waarde 'error'. In het .css bestand die standaard met de Form Builder komt kan je de kleur van een invulveld met een 'error' aanpassen.

• Ga naar Layout -> Stylesheets
• Klik op FormBuilder Default Style

Bijvoorbeeld:

.contactform input {
    width: 100px;
    border: 1px solid #0000FF;
}

.contactform input.error {
    width: 100px;
    border: 1px solid #FF0000;
}

Help & Documentatie

• JQuery plugin validation documentatie
• JQuery plugin validation voorbeelden
• Form Builder documentatie op de CMS Made Simple wiki