Magento formulier veld AJAX validatie

In dit artikel leg ik je een snelle en betrouwbare manier uit om AJAX validatie toe te passen op je Magento formulieren. Magento’s validatie wordt uitgevoerd met behulp van een externe javascript bibliotheek genaamd Really Easy Field Validation.

 

Valideer invoer in Magento

photo credit: Alex E. Proimos via photopin cc

Op dit moment van schrijven maakt Magento 1.9.0.1 gebruik van Really easy field validation versie 1.5.4.1 (2007-01-05). Deze bibliotheek komt van de auteur Andrew Tetlaw, je kunt de GIT repository voor dit project hier vinden. Deze is al een tijd niet meer bijgewerkt, maar werkt nogsteeds prima!

Zoals de naam van de bibliotheek al doet vermoeden is het toepassen van validatie in Magento erg gemakkelijk. Het is gebaseerd op de basis methodiek door in te haken op het onsubmit event van een formulier. Wanneer 1 of meerdere veld validaties mislukken zal Magento deze toonbaar maken met een melding erbij. Dit voorkomt tevens dat het formulier verstuurd kan worden. Al met al eindig je in Magento met formulier velden die lijken op onderstaande code voorbeeld:

In bovenstaande voorbeeld wordt gebruik gemaakt van de validatieregel “validate-email”. Een overicht van alle validaties (voor Really easy field validation) kun je hieronder vinden, deze plaats je alsĀ classname in je input veld:

  • required
    • Veld mag niet leeg zijn.
  • validate-number
    • Veld moet een geldig nummer bevatten.
  • validate-digits
    • Veld mag enkel cijfers bevatten.
  • validate-digits-range
    • Veld mag enkel cijfers bevatten en moeten binnen een bepaalde reeks vallen.
  • validate-alpha
    • Veld mag enkel letters bevatten.
  • validate-alphanum
    • Enkel cijfers en letters, dus geen speciale karakters.
  • validate-email
    • Valideer de invoer als een emailadres
  • validate-emailSender
    • Gebruik alleen zichtbare karakters en spaties
  • validate-date
    • Invoer moet een geldige datum zijn
  • validate-date-range
    • De “from date” waarde moet lager zijn dan de “To date” waarde.
  • validate-number
    • Invoer moet een geldig nummer zijn
  • validate-number-range
    • De invoer moet binnen een specifieke reeks vallen
  • validate-url
    • Invoer moet een geldige url zijn
  • validate-clean-url
    • Invoer moet zijn: http://www.marcobax.nl of www.marcobax.nl zijn (vervang met je eigen domein naam)
  • validate-date-au
    • Valideer een datum met het formaat: dd/mm/yyy
  • validate-currency-dollar
    • Controleer of de waarde een geldige dollar waarde heeft
  • validate-selection
    • Is er wel een optie geselecteerd? 1e optie telt hierbij niet mee.
  • validate-one-required
    • Tenminste 1 van de checkbox / radio elementen moet aangevinkt zijn in een groep.
  • validate-one-required-by-name
    • Zelfde als validate-one-required, maar dan op TAGNAME.
  • validate-no-html-tags
    • HTML tags mogen niet toegestaan zijn.
  • validate-select
    • Tenminste 1 optie van een dropdown moet geselecteerd zijn.
  • required-entry
    • Zelfde als “required”.
  • validate-code
    • Gebruik enkel a-z letters, getallen (0-9) of underscores (_) in dit veld. Eerste karakter moet een letter zijn.
  • validate-street
    • Enkel letters (a-z of A-Z), nummers en spaties zijn toegestaan.
  • validate-phoneStrict
    • Voor Amerikaanse telefoonnummers, bijvoorbeeld: (0123) 456-7890 of 133-456-7890
  • validate-phoneLax
    • Zelfde als validate-phoneStrict
  • validate-fax
    • Amerikaans faxnummer, bijvoorbeeld: (123) 456-7890 of 123-456-7890
  • validate-password
    • 6 of meer karakters, spaties voor en na het wachtwoord worden niet meegenomen.
  • validate-new-password
    • 6 karakters of meer, moet anders zijn dan het oude wachtwoord.
  • validate-admin-password
    • 7 of meer karakters, wachtwoorden moeten zowel numerieke als alfanumerieke karakters bevatten
  • validate-cpassword
    • Validatie om te controleren of de invoer van 2 wachtwoord velden aan elkaar gelijk zijn.
  • validate-both-passwords
    • Zelfde als validate-cpassword.
  • validate-identifier
    • Voor slugs, bijvoorbeeld: “test-pagina”, “test-pagina.html” of “test/pagina”.
  • validate-xml-identifier
    • Accepteer enkel geldige XML identifiers, bijvoorbeeld: test_1, block_10 of id-123.
  • validate-ssn
    • Wederom een Amerikaanse validatie, dit is om een Social Security Number te valideren.
  • validate-zip
    • Valideer een postcode, bijvoorbeeld: 90602 of 90602-1234 (Amerikaans).
  • validate-zip-international
    • Deze doet niets, op dit moment valideert deze altijd.
  • validate-not-negative-number
    • Getal mag niet negatief zijn, tip: combineer deze met validate-number.
  • validate-zero-or-greater
    • Accepteer enkel nummers gelijk aan 0 of groter dan 0, maar niet minder.
  • validate-state
    • Amerikaans: valideer staat.
  • validate-cc-number
    • Invoer moet een geldig creditkaart nummer formaat zijn
  • validate-cc-type
    • Creditkaart moet creditkaart type matchen. Zo mag een VISA nummer niet MAESTRO als kaarttype hebben.
  • validate-cc-type-select
    • Kaart type moet creditkaart nummer matchen
  • validate-cc-exp
    • Controleer verloopdatum, de creditkaart mag niet verlopen zijn.
  • validate-cc-cvn
    • Valideer creditkaart validatienummer (CVN).
  • validate-ajax
    • Valideer met behulp van een AJAX call.
  • validate-data
    • Invoer mag enkel bestaan uit letters (a-z of A-Z), underscores (_). Eerste karakter moet een letter zijn.
  • validate-css-length
    • Invoer moet een geldige CSS length zijn, bijvoorbeeld: 100px, 77pt, 20em, .5ex of 50% zijn.
  • validate-length
    • Invoer moet een minimale lengte hebben.
  • validate-percents
    • Valideer of de invoer een getal lager dan 100 is.
  • validate-cc-ukss
    • Controleer op switch/solo kaart types.

Zoals je kunt lezen in bovenstaande voorbeelden kan het voorkomen dat je bepaalde validaties moet combineren. Je kunt ook zelf meerdere validaties op 1 invoer toepassen, bijvoorbeeld “validate-email” en “required-entry” om ervoor te zorgen dat de gebruikers van je website ook daadwerkelijk een e-mail invullen.

Succes met het valideren van Magento formulieren!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *