Jquery Validatie

Voeg je eigen custom attribuut toe of voeg de namen van de validaties toe aan de klasse van je input.
Maak functies in JS voor elke soort validatie.
Roep de validatie aan aan de hand van de attribuut.
Geef het antwoord terug aan een standaard functie die het bericht teruggeeft.

Het is misschien wel iets gebruiksvriendelijker als direct wordt aangegeven of iets verkeerd is ingevuld, maar omdat de gegevens sowieso (altijd!) aan de serverzijde gecontroleerd moeten worden (waar PHP het formulier verwerkt) zou ik daar eigenlijk eerst aandacht aan besteden.

JavaScript kan te allen tijde uitgeschakeld worden, vervolgens werken of je controles niet meer, of je hele formulier doet niets meer, met controles via JavaScript maak je je formulier hier ook (mede) afhankelijk van. Dit is vandaag de dag niet zo'n probleem meer (de meeste apparaten enzo ondersteunen dit meestal wel), maar in het kader van toegankelijkheid van je website is dit wel iets om mee te nemen (en hier dan ook bewust een keuze in te maken). In principe zou een formulier niet van JavaScript afhankelijk moeten zijn, maar je kunt ervoor kiezen dat je er vanuit gaat dat dit ondersteund wordt.

Dan de PHP kant van het verhaal, als je veelvuldig (standaard of zelfs maatwerk) formulieren moet opstellen wordt het misschien eens tijd om hier een soort van code voor op te stellen, oftewel een soort van formuliersysteem? Als je wat ingewikkelder formulieren maakt kom je trouwens haast niet om JavaScript heen maar dat wil niet zeggen dat je formulieren gebruiks-onvriendelijk worden als je de validatie aan de serverzijde doet. Als je de verschillende acties bij de interactie met een formulier een beetje opdeelt, en vervolgens alles aan elkaar knoopt met enerzijds je "formuliersysteempje" en anderzijds sessies waarin je tijdelijk formulierdata bijhoudt dan kun je best strakke formulieren in elkaar zetten. De code die je moet schrijven voor het genereren van een formulier wordt in combinatie met zo'n formuliersysteem ook meteen een stuk korter.

In zo'n formuliersysteem zou je bijvoorbeeld verschillende klassen kunnen schrijven voor het formulier in het algemeen, een abstracte klasse voor een formulierelement, en allerlei concrete subklasses die echte concrete formulierelementen implementeren. In die klasses kun je vervolgens weer regels opnemen (bijvoorbeedl door middel van methoden met een speciale prefix) die bepalen hoe een bepaald veld wordt gevalideerd. Deze formulier-genereer-code is dan ook meteen bruikbaar voor het wijzigen van data via zo'n zelfde formulier.

Ik heb al eerder hier ergens een voorbeeldje geplaatst, en alle bijbehorende code die je hiervoor moet schrijven, minus de formulierklassen uiteraard ;-), maar ik denk dat dit wel een redelijke indruk geeft van hoe je dit aan zou kunnen pakken.

EDIT: toegegeven, dit formulier gebruikt ook JavaScript en is hier dus ook afhankelijk van, maar dit formulier ontstijgt wel een beetje de standaard functionaliteit die een formulier te bieden heeft. Alle validatie vindt aan de PHP-kant plaats en hier komt dan terugkoppeling over als er iets niet in orde is.

Mja, maar zou het niet handiger zijn als dat hand in hand gaat? Ik bedoel, zit er enige structuur in hoe zo'n formulier wordt opgebouwd? Dan zou je in principe de jQuery-validatie code ook kunnen laten genereren.

Dit zou mijn voorkeur hebben: op deze manier wordt validatie centraal aangestuurd en schrijf je voor hoe het gedrag van je formulier is.

Wanneer je geen vast stramien hebt voor de opbouw van een formulier wordt dit elke keer maatwerk.

Een alternatief (of mogelijke implementatie van het bovenstaande) is dat je (automatisch) CSS stijl-klasses (of andere attributen) toevoegt aan de velden of veld-containers (binnen de scope van je form-container) die aangeven wat voor type veld het is en/of wat voor controle(s) er uitgevoerd dient (dienen) te worden. Vervolgens hang je aan deze stijl-klasses events die getriggerd worden bij (bijvoorbeeld) het verliezen van de focus waarna een of meer controles worden uitgevoerd. Dit stelde @Tim hierboven min of meer ook al voor. Volgens mij wordt deze werkwijze vaak gehanteerd in "checkouts" van Magento-webshops.

Illustratief voorbeeld, vele varianten en optimalisaties mogelijk, dit illustreert enkel het concept:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- use .min.js for minified version -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<style type="text/css">
body                    { font-family: sans-serif; font-size: 10pt; }
div.form div.item       { display: block; line-height: 25px; }
div.form div.even       { background-color: #eeeeee; }
div.form div.odd        { background-color: #ffffff; }
div.form div.left       { display: block; float: left; width: 20%; }
div.form div.right      { display: block; float: left; width: 80%; }
div.form div.clear      { clear: both; }
div.form ul             { margin: 5px 0 0; }
div.form input          { border: 1px solid; }
div.form input.error    { border-color: #ff0000; background-color: #ffcccc; }
</style>
</head>


<body>
<div class="form">
    <form action="" id="form_1" method="post">
        <div id="messages"></div>
        <div class="item even">
            <div class="left"><label for="text_1">text field</label></div>
            <div class="right"><input type="text" name="text_1" id="text_1" value="" class="validate-text" /></div>
            <div class="clear"><!-- clear --></div>
        </div>
        <div class="item odd">
            <div class="left"><label for="text_2">text field</label></div>
            <div class="right"><input type="text" name="text_2" id="text_2" value="" class="validate-text" /></div>
            <div class="clear"><!-- clear --></div>
        </div>
        <div class="buttons">
            <button type="submit">submit</button>
        </div>
    </form>
</div>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
    $('div.form').on('focus', 'input.validate-text', function(e) {
        // hide previous errors
        $(this).parent().find('.errors').slideUp(function() {
            $(this).remove();
        });
    });
    $('div.form').on('blur', 'input.validate-text', function(e) {
        // show new errors
        if ($(this).val() === 'test') {
            // unflag as error
            $(this).removeClass('error');
        } else {
            // flag as error
            $(this).addClass('error');
            if ($(this).parent().find('.errors').length == 0) {
                $html = $('<div class="errors"><ul><li>input is not equal to &quot;test&quot;</li></ul></div>').hide();
                $(this).parent().append($html);
                $html.slideDown();
            }
        }
    });
    $('#form_1').submit(function(e) {
        // trigger validation events
        $('input').trigger('blur');


        // check if we have errors
        if ($('#form_1 .error').length > 0) {
            e.preventDefault();
            $('#messages').html('<p>one or more fields still contain errors</p>');
        }
    });
});
//]]>
</script>
</body>
</html>

Voor een mogelijk wat beter leesbare variant zie hier.

Citaat van L.Kok

Echter kiezen we voor de dubbele controle zowel jQuery als Back-end.

Dit is wel een leuke opmerking aangezien je dus het beste de jQuery ook door je Back-End kan laten controleren doormiddel van AJAX. Dit is sneller dan jQuery zelf de validatie laten doen, dit geldt vooral voor bezoekers met een trage computer, aangezien jQuery door de browser van je bezoeker wordt uitgevoerd.
Nadeel is wel dat AJAX meer serverkracht vergt aangezien dan de server rekent ipv de browser van je bezoeker.
Ook laad je webpagina een stuk sneller doordat je alleen een kleine ajax request als jQuery aan je webpagina hoeft toe te voegen ipv een heel lang jQuery script omdat al die validaties erin zitten.

Mocht je toch voor de volledige jQuery validatie kiezen zal ik je vraag even beantwoorden:

Als je elke type input veld een bepaalde class geeft, kan je dit met je jQuery uitlezen en aan de hand daarvan een functie oproepen die de bijbehorende validate doet. Je zult dus voor elke type validatie een functie moeten maken.

bijv. (zo uit m'n hoofd geschreven, zou moeten werken, niet getest)

$("input").keyup(function() {
  var classname = $(this).attr('class');
  var value = $(this).val();
  window[classname](value);
});


function name(val) {


  if (val.search(/[^a-zA-Z]+/)) {
    alert("Naam mag alleen letter bevatten!");
  }


}

Ajax form
Dan hoef je dus enkel de server side validatie te doen (via PHP) en een message doorspelen naar de view aan de hand van een ajax request

$(".ajaxForm").submit(function(e){
        var formURL = $(this).attr('action');
        var method = $(this).attr('method');
        var formData = $(this).serializeArray();
        var responseObj = $(this).attr('data-response');
        $.ajax(
        {
          url : formURL,
          type: method,
          data : formData,
          dataType: 'html', /* json ook handig (zoek het op) */
          success:function(data, textStatus, jqXHR) 
          {
            responseObj.html(data);
          }
        });
        e.preventDefault();
    });

Zo kan je een form Ajax gestuurd a.h.v. de laatste stabiele jquery library 'submitten'
Attributen mee te geven aan je form object:
- action : Welke URI ?
- method : POST / GET / PUT / DELETE?
- data-response : Voorbeeld: #login-response (Dan in je tree een <div id="login-response"></div>) Ook mogelijk met classes voorbeeld: .login-response en (Dan in je tree <div class='login-response'></div>) Werken met ID is meer aangeraden aangezien je van elke ID maar 1 object zou mogen hebben in je HTML tree, het is uiteraard de bedoeling dat maar 1 response object word aangepast
- formData: zorg ervoor dat alle inputs aanwezig in de form correct zijn en dit word netjes in de juiste array gestopt a.h.v. de jquery functie serializeArray() deze waarden worden dan meegespeelt naar je action script onder $_POST['key'] = waarde Indien je GET, PUT of DELETE gaat gebruiken zal dit dus ook veranderen naar $_GET, $_PUT of $_DELETE.

EN de HTML:

<div id="ajaxResponse"></div>
<form action="pad/naar/script.php" method="POST" data-response="#ajaxResponse" class="ajaxForm">
  <input type="text" name="username"/>
  <input type="submit" name="submit" value="Doe!"/>
</form>

Voorbeeld van hoe je form er zou uitzien, de attributen van je form zijn hier belangrijk indien je bovenstaande jQuery code wilt gaan gebruiken.
Ook je response object voorzien in je tree om een error of succes bericht door te spelen naar de gebruiker.

Deze code zal dus letterlijk een ajax request maken naar de meegegeven action URI met alle input aanwezig in je form.
In je action script kan je de nodige validatie uitvoeren en een action message genereren om mee te geven aan je view side.
De response bij deze ajax call zal in het object geplaatst worden die jij meespeelt in het attribuut data-response in je form tag. (Zie data response voorbeeld hierboven)

Om te testen kan je dus in je action script <?PHP var_dump($_POST); ?> plaatsen en zo zul je een array van variabelen zien verschijnen na het submitten van je form, zorg er dus voor dat je data response object aanwezig is in je HTML tree

Met bovenstaande jQuery code kan je dus niet enkel 1 form maar alle forms naar wens via ajax laten verlopen!
Enige wat je moet doen is zorgen dat de code geïmporteerd word op de pagina met je form en ervoor zorgen dat je form attributen correct zijn ingevuld form class moet dus ajaxForm zijn ook

Belangrijk voor usability:
En indien je ook zou willen indien de gebruiker JS heeft uitgeschakeld dat de form ook normaal word uitgevoerd met een http request moet je gewoon zorgen dat je script (action script) dit opvangt en dan ook indien een http request de gehele view inclusief error/succes message printen en indien ajax request enkel de error/succes message printen.
Kan heel simpel door bv een extra (hidden) input waarde mee te geven bv: name='type' value='http' of ajax ?? en standaard http te plaatsen en indien document ready (js zal netjes uitgevoerd worden indien je is ingeschakeld..) daar plaatsen we dan bv: $("input[name=type]").val('ajax'); om het type van de form aan te passen zodat we een ajax form krijgen als js ingeschakeld is. Om dit dan netjes te kunnen onderschijden in ons action script onder $_POST['type'] = http of ajax ?