[javascript] Data attributen of definitie in javascript?

[xzaz]

Even een simpele vraag waar ik niet uitkom of als ik een weg in sla die ik eigenlijk niet in op moet slaan.

Ik ben bezig met een validator systeem waarbij ik via dat data- attribuut een validation wil opgeven. Dus via deze manier:

HTML:

<input type="text" name="testfield" data-validate="max-length,1;min-length,2" />

Op deze manier lees ik uit hoe de gebruiker dit veld heeft gedefinieerd en uiteindelijk parse ik dit in een string (JSON) waarvan ik weer een object maak om uiteindelijk daadwerkelijk de controle toe doen.

Het 'probleem' is echter dat ik hier definieer (dus in de HTML) welke checks uitgevoerd moeten worden. Is dit de goede weg of moet dit gedefinieerd worden in de .js dus op deze manier:

JavaScript:

$(document).ready(function () {
    $('#testForm').Validator(
    {
        testfield: { max-length: 1, min-length: 2 }
    });
});

Wat is jullie aanpak hierin?

[Barryvdh]

Waarom geen HTML5 validation? http://docs.webplatform.o..._form_features#Validation

Gewoon max/min/required/pattern/type=email etc gebruiken, en evt fallback gebruiken voor oudere gebruikers.

[NMe]

Omdat IE9 dat niet ondersteund en nog lang niet iedereen over is naar IE10. Bovendien doen mobiele browsers met uitzondering van Blackberry er niets mee en kent Safari het required-attribuut niet.

Ik ga zelf overigens voor geen van beide manieren, maar van de twee is de eerste de makkelijkste om te onderhouden. Bovendien niet eens echt incorrect omdat je omschrijft wat voor input je eigenlijk aan het renderen bent.

Waar ik zelf liever voor ga is een class "validated" op het form, en vervolgens een class of input type gebruiken voor die validatie. Eventueel gebruik ik daarbij data-attributen voor de extra info. In mijn javascript kan ik dan een simpel loopje doen over alle forms met een validated class en daar een onsubmit-handler aan toevoegen die alle inputs naloopt.

xzaz schreef op woensdag 08 mei 2013 @ 20:09:
shit dit hoort hier niet

Ehm...jawel.

[Barryvdh]

Daarom zeg ik toch ook dat je een fallback moet gebruiken voor oudere gebruikers? Het was meer dat ik het logischer zou vinden om bestaande syntax/regels aan te houden, in plaats van weer je eigen regeltjes bedenken. min/max/required kan je ook gewoon opvragen als ze niet ondersteund worden.
En je zou ook kunnen controleren of iets wel/niet ondersteund wordt, en het anders de browser gewoon laten oplossen.

[NMe]

Die fallback ziet er vervolgens precies hetzelfde uit als waar de topicstarter naar vraagt en is dus sowieso óók nodig, dus HTML5 validation is niet de oplossing voor het probleem, terwijl je het wel bracht alsof het het probleem oploste.

[Barryvdh]

Ah ok, ja vooruit, zal het even rephrasen:

Ik zou de validation rules in de html zetten, en met javascript die regels uitlezen. Dan heb je 1 algemeen stuk javascript wat voor al je forms werkt.
En als je dan toch bezig bent, zou ik overwegen om de syntax te gebruiken van HTML5 input validation. Eventueel kan je dan ook gewoon HTML5 laten valideren, en alleen je eigen regels toepassen als dat niet ondersteund wordt. Voordeel is dat dat later misschien makkelijker kan zijn (helemaal overschakelen op native html5 validatie, of een van de vele plugins die dezelfde syntax gebruiken, zoals bijvoorbeeld http://bassistance.de/jqu...jquery-plugin-validation/)

[MueR]

HTML5 validation is ruk om de simpele reden dat je geen foutmeldingen kan specificeren. Het idee is leuk bedacht maar slecht uitgevoerd.

[Bosmonster]

Uiteindelijk wil je een validatie die je zowel clientside als serverside kan gebruiken. Bij voorkeur zelfs eentje die je kunt hergebruiken, zodat je hem niet tweemaal hoeft te definieren.

Je kunt regels wegschrijven vanuit de backend, waarmee de eerste optie uiteraard de voorkeur geniet, aangezien je liever geen script genereert. Andere optie is submitten bij een wijziging via ajax en de server ook de clientside validatie laten uitvoeren. Extra voordeel daarbij is dat je ook complexere validaties kunt doen (bestaat username al?, om maar iets simpels te noemen).

[ Voor 12% gewijzigd door Bosmonster op 10-05-2013 09:28 ]

[RM-rf]

xzaz schreef op woensdag 08 mei 2013 @ 20:09:


Het 'probleem' is echter dat ik hier definieer (dus in de HTML) welke checks uitgevoerd moeten worden. Is dit de goede weg of moet dit gedefinieerd worden in de .js dus op deze manier:

ik zie daarvan eigenlijk niet het 'probleem' in..
het is enkel ten voordele als je in de HTML bepaalde attributen direkt kunt koppelen aan een element.

hooguit vind ik je opzet om er één lange string van te maken en die weer te parsen een beetje dubbelop en mogelijk onpraktisch.

essentieel is volgens mij echter altijd hoe het beheer van zulke code het meest eenvoudig, overzichtelijk blijft..
ook of je oplossing goed gedocumenteerd is en bv zoveel mogelijk gebruik maakt van de standaards..

dat zou bv een grond zijn om toch te kiezen voor HTML5 validatie als 'basis' (maar daarbovenop wat extra javascript voor oudere browsers), ook wanneer de browserondersteuning niet volledig is, kun je wel bedenken dat die code vermoedelijk ook inzichtelijk en begrijpbaar zou zijn qua 'toepassing' door andere web-ontwikelaars die na jou aan die code moeten zitten.

[xzaz]

Bedankt voor alle reacties.

RM-rf schreef op vrijdag 10 mei 2013 @ 13:23:
[...]


ik zie daarvan eigenlijk niet het 'probleem' in..
het is enkel ten voordele als je in de HTML bepaalde attributen direkt kunt koppelen aan een element.

hooguit vind ik je opzet om er één lange string van te maken en die weer te parsen een beetje dubbelop en mogelijk onpraktisch.

Omdat HTML geen script taal is waar regels gedefinieerd moeten worden naar mijn mening. Ik zit altijd in dubio met dit soort zaken waar ik mijn regels plaats, daarom dit topic.

essentieel is volgens mij echter altijd hoe het beheer van zulke code het meest eenvoudig, overzichtelijk blijft..
ook of je oplossing goed gedocumenteerd is en bv zoveel mogelijk gebruik maakt van de standaards..

dat zou bv een grond zijn om toch te kiezen voor HTML5 validatie als 'basis' (maar daarbovenop wat extra javascript voor oudere browsers), ook wanneer de browserondersteuning niet volledig is, kun je wel bedenken dat die code vermoedelijk ook inzichtelijk en begrijpbaar zou zijn qua 'toepassing' door andere web-ontwikelaars die na jou aan die code moeten zitten.

Ik denk dat ik dit ook ga overwegen; zeker voor de toekomst waar ik denk dat HTML5 validation checks het toch gaan worden, maar dit is in deze sector altijd een beetje koffiedik kijken.

Dit lijkt me wel prima:

JavaScript:

$(document).ready(function () {
    $('#testForm').Validator(
    {
        html5support: true
    });
});

waarbij html5support standaard false staat

[ Voor 7% gewijzigd door xzaz op 11-05-2013 14:02 ]