[disc/dhtml] toevoegen van custom attributes

[faabman]

verhaal
De afgelopen week ben ik maar weer eens wat aan het sleutelen met javascript / dom-methoden en het valideren van formulieren.

Nu leek het mij wel aardig om aan de verschillende selects / inputs / textarea's / etc. in een formulier een extra attribute mee te geven waarin staat aangegeven wat het datatype van het veld moet zijn en of het veld verplicht is (en weet ik veel wat voor extra info ik nog op wil slaan).

Een inputveld ziet er dan als volgt uit:

HTML:

  <input  type="text" 
              name="naam" 
              id="naam" 
              size="10" 
              maxlength="10" 
              datatype="date(dd/mm/yyyy)"
              required="true" />

Via .getAttribute() zijn de extra attributen eenvoudig op te halen en te gebruiken in een generieke clientside formulier-validatie-functie.


vraag:
Wat ik me dus afvraag:
- Hoe lossen jullie dit (clientside) op?? Schrijven jullie alle clientside validatie helemaal handmatig??
- Zijn er nog andere mogelijkheden??
- Wat vinden jullie uberhaupt van het gebruik van costum - attributes??


note:
Ik weet dat XForms en eventuele andere webform - standaarden onderweg zijn, maar ik wil niet wachten totdat die enigzins cross-browser geïmplemteerd zijn.

Ik was niet van plan om costum-attributes in een website te gebruiken, leek me eerder wat voor een backoffice-applicatie waarvan ik zeker weet dat de gebruikers een bepaalde browser (i.e. / mozilla / safari) hebben.

[ Voor 5% gewijzigd door faabman op 28-05-2004 21:53 ]

[Verwijderd]

Ik heb eens een HTC scriptje - IE-only dus - gemaakt dat eventueel aan de hand van een custom regex attribuut nagaat of de inhoud van een formulierveld geldig is.

Bij een geldige inhoud krijgt het veld een witte achtergrondkleur en bij een ongeldige blijft/wordt de achtergrond rood. Via dit hulpmiddeltje kan de gebruiker dus - al voor het submitten - constateren of hij/zij alles goed heeft ingevuld.

Voorbeeldje: http://variomatic.quickhost.nl/validatie/

Aan de velden voor het emailadres en de leeftijd is een regex attribuut opgenomen. De andere velden worden minder streng gevalideerd (als het veld ook maar enige inhoud bevat, is het al OK).

Ik heb erover gedacht om ook een XBL variant (voor Mozilla) te maken, maar stuitte op een nogal lastige bug in Mozilla. Bij het toevoegen van XBL aan een formulierveld bleken de pijltjestoetsen in het veld opeens niet meer te werken.

[Bosmonster]

- Hoe lossen jullie dit (clientside) op?? Schrijven jullie alle clientside validatie helemaal handmatig??
- Zijn er nog andere mogelijkheden??

Ik doe validatie nooit clientside. Je moet het sowieso toch al serverside doen dus als ik het clientside nog een keer ga doen ben ik nogal dubbelop bezig En voor dat extra post/refreshje maakt het ook niet al te veel uit (voordat mensen dat als argument aan gaan dragen ).

[faabman]

Verwijderd schreef op 29 mei 2004 @ 00:42:
Ik heb eens een HTC scriptje - IE-only dus - gemaakt dat eventueel aan de hand van een custom regex attribuut nagaat of de inhoud van een formulierveld geldig is.

Ziet er geinig uit, maar, ik wil dat de validatie ook in mozilla / opera / safari werkt en die ondersteunen afaik geen behaviors.

Bosmonster schreef op 29 mei 2004 @ 01:27:
Ik doe validatie nooit clientside. Je moet het sowieso toch al serverside doen dus als ik het clientside nog een keer ga doen ben ik nogal dubbelop bezig
En voor dat extra post/refreshje maakt het ook niet al te veel uit (voordat mensen dat als argument aan gaan dragen ).

Uiteraard moet alles ook nog eens serverside worden gevalideerd, maar, niet alle formulieren die ik gebruik worden (direct) naar de server gestuurd. In een wysiwyg-editor zijn bijvoorbeeld nogal wat formulieren die gebruikt worden om elementen toe te voegen / te wijzigen.

[crisp]

op zich vind ik dat er niets mis is met het gebruik van custom attributes in HTML. Enige punt is dat het geen HTML meer is, en je eigenlijk je eigen DTD eraan zou moeten hangen. Feit is wel dat zelfs met een (X)HTML DTD het gewoon blijkt te werken in alle gangbare browsers, dus is het een kwestie van voordelen ten opzichte van nadelen zetten. Nadelen heb ik nog nooit echt ondervonden (behalve dat IE op de MAC de mist in gaat met getAttribute op custom attributes - maar wie surft er nou nog met IE op een MAC? ), dus zie ik enkel maar voordelen

[oh,when?]

Bosmonster schreef op 29 mei 2004 @ 01:27:
En voor dat extra post/refreshje maakt het ook niet al te veel uit (voordat mensen dat als argument aan gaan dragen ).

Ik vindt niets zo irritant als een meervoudig formulier in moeten vullen, en dan voor iedere stap eerst een postback te doen, alleen om op een andere pagina uit te komen waarop staat:

"U heeft niet de juiste informatie ingevuld"

Vooral reissites en shopping sites hebben daar nogal een handje van. Lekker gebruiksvriendelijk

[Verwijderd]

Tjah, we hebben niet allemaal de beschikking over Flex, en dan zit je toch al gauw aan een beperking.
Ik valideer altijd client- én server-side. Wel zo lief als een gebruiker meteen te zien krijgt dat zijn input ongeldig is, ipv van frustrerende pagerefreshes.

Je kan trouwens een eigen class schrijven voor JavaScript waarbij je aan verschillende velden verschillende eigenschappen toekent. Bijvoorbeeld of het een e-mailadres is, of telefoonnummer, of weet ik veel wat.
Het kost eenmalig wat werk om te maken, maar als het eenmaal goed in elkaar zit is client-site validate maken erg gemakkelijk.

[ Voor 40% gewijzigd door Verwijderd op 30-05-2004 16:38 ]

[Verwijderd]

faabman schreef op 29 mei 2004 @ 10:23:
Ziet er geinig uit, maar, ik wil dat de validatie ook in mozilla / opera / safari werkt en die ondersteunen afaik geen behaviors.

Dat wordt nog lachen, dan, want er zijn volgens mij geen twee browsers die hetzelfde met custom (niet-DTD) attributes omgaan.

Een eenvoudiger oplossing voor de required-optie is om het op te nemen in de className van een input.

HTML:

<input type="text" class="required" ... />

Daar is dan eenvoudig op te checken onsubmit van het formulier. Het is niet ideaal maar wel heel snel te maken.

Een voorbeeld kun je vinden op:
http://www.citrixvalueadd...dex.php?lang=NL&page=help