Clear html5 form error

[chielsen]

Als ik in Firefox een verplicht radio button heb en op verstuur klik worden mijn radios rood (ze zijn in error state).
Als ik dan een optie kies verdwijnt de error state.
Wanneer ik dan de cancel knop gebruik (of via form.cancel()) komt de error state weer terug.
Met geen mogelijk kan ik de error state clearen zonder 1 optie aan te vinken.
Iemand een idee?

Zie: http://jsfiddle.net/KDkvE/

Dus: Klik op Next en daarna Reset. De rest zal niet de error status verwijderen.
Dit werkt trouwens wel in chrome.

De radio buttons opnieuw renderen of de state veraneren met setCustomValidity('') heeft allemaal geen effect.

[jbdeiman]

Op zich vindt ik dat ook een logischere reactie van de validator dan dat die ineens zegt dat het nu wel goed is. Wanneer je het formulier voor het eerst inlaadt, dan zit er nog niets in en dient hij ook niet aan te geven dat iets niet correct is ingevoerd, ongeacht of het veld verplicht is of niet.

Wanneer je wel aan het invullen bent geweest en alles leeghaalt, is het eigenlijk logisch dat je blijkbaar wat met dat formulier wilt. Daarop wordt ook keurig aangegeven (met de rode kleur) dat het veld niet correct is ingevoerd.

Als ik zelf moest bepalen hoe zoiets zou moeten werken zou ik hetzelfde doen. Bij initieren van de pagina (het formulier) de gebruiker e.e.a. goed in laten vullen. (wel met een hint met een * oid bij een verplicht veld) Wat er dan niet goed is ingevuld bij het op "verzenden" klikken is rood weergegeven. Naar mijn idee is Chrome degene met het afwijkende gedrag: Die zegt bij het resetten van het formulier simpel gezegd dat er geen fouten zijn. Daarnaast ontbreekt bij mij ook altijd het gehele nut van een reset knop op een formulier, wil je hem niet invullen dan doe je dat niet en ga je naar een andere pagina. Wil je hem wel verzenden dan vul je het formulier aan, waar nodig, en drukt alsnog op verzenden.
Reset je dan e.e.a. dan blijven de verplichte velden rood om aan te geven dat deze toch echt ingevuld moeten worden voor verzenden. Ook Bootstrap validatie (twitter bootstrap) werkt op die manier en is imo de meest logische methodiek om dit te doen.


Ik weet: Het is geen antwoord op je vraag, maar een suggestie om op een wat andere manier naar de werking te kijken. Er zit echt wel een reden achter om het op deze manier te ondervangen.

[ Voor 13% gewijzigd door jbdeiman op 07-03-2013 14:17 ]

[chielsen]

Tja, ik zou zeggen dat een reset het formulier moet resetten naar de initiele state. Dwz alles leeg / default waardes en geen errors laten zien.
Maar goed het vervelende is dat ik ook niet met een omweg die error kan clearen.

Ik gebruik dit formulier icm ajax. Na het versturen wil ik het formulier gebruiken voor een andere vraag, maar ik lijkt er niet aan te ontkomen het hele formulier dan opnieuw op te bouwen of validatie uit te zetten.

[krvabo]

Het required-attribuut wordt niet ondersteund door IE9 of Safari, dus sowieso zul je het als je het crossbrowser wil hebben toch al anders aan moeten pakken.

[Bosmonster]

Volgens mij is dit gedrag ook vrij en niet gespecificeerd.

Overigens is het gebruik van de reset-mogelijkheid op een form af te raden. Het voegt functioneel gezien ook niks toe, behalve de mogelijkheid tot het "per ongeluk totaal resetten van je formulier".

[jbdeiman]

Bosmonster schreef op donderdag 07 maart 2013 @ 15:03:
Volgens mij is dit gedrag ook vrij en niet gespecificeerd.

Overigens is het gebruik van de reset-mogelijkheid op een form af te raden. Het voegt functioneel gezien ook niks toe, behalve de mogelijkheid tot het "per ongeluk totaal resetten van je formulier".

Mee eens, dat gaf ik ook nog aan in mijn post, een reset mogelijkheid zou niet mogelijk hoeven zijn.

[Quinie]

jbdeiman schreef op donderdag 07 maart 2013 @ 14:14:
Als ik zelf moest bepalen hoe zoiets zou moeten werken zou ik hetzelfde doen. Bij initieren van de pagina (het formulier) de gebruiker e.e.a. goed in laten vullen. (wel met een hint met een * oid bij een verplicht veld) Wat er dan niet goed is ingevuld bij het op "verzenden" klikken is rood weergegeven.

Offtopic maar mogelijk intressant. Ik zou bij de uit focus al de check doen of het veld goed is. Zo irritant dat je op verzenden drukt en je wachtwoord veld is weer leeg omdat je poctcode verplicht was

[chielsen]

Ik gebruik ook niet de cancel knop, maar het cancel event. Het heeft niet super veel toegevoegde waarde inderdaad, maar als ik het dan zou gebruiken, zou ik ook verwacht dat echt alles wordt gereset, ook de error state.

@krvabo, dat weet ik. Het is niet erg als het niet werkt, maar het ziet er niet uit als de radio buttons al rood zijn voordat men de vraag heeft beantwoord. Dat betekent voor nu dat ik dus maar afzie van het hele form validation. Ik vind trouwens de default error state van radio buttons ook erg lelijk. Volgens mij duurt het nog wel een paar jaar voordat we dit kunnen gebruiken.


@Quinie, ALs je de fiddle bekijkt de het formulier alleen 1 radio button set. Lijkt mij dus niet nodig.

[R4gnax]

Bosmonster schreef op donderdag 07 maart 2013 @ 15:03:
Volgens mij is dit gedrag ook vrij en niet gespecificeerd.

Overigens is het gebruik van de reset-mogelijkheid op een form af te raden. Het voegt functioneel gezien ook niks toe, behalve de mogelijkheid tot het "per ongeluk totaal resetten van je formulier".

Totaal resetten is het nooit echt. Het is altijd een 'revert' operatie; de live waardes van de inputs in een formulier nemen de waardes terug aan zoals gespecificeerd in het HTML document.

Een reset operatie is eigenlijk heel zinnig voor formulieren waar je een al opgeslagen stuk data gaat bijwerken. Scheelt je een keer op F5 rammen om de pagina te verversen als je een fout gemaakt hebt en een oude waarde terug moet hebben.