CODEWITHSUNDEEP
javascripthtmlformsvalidation
Michiel Thalen
Michiel Thalen

Reputation: 300

Clear html5 form error

When using html5 form validation it seems impossible to clear the error state from it. The problem is on a radio button group that is required. When trying to submit it with no radio button selected, it will highlight all the radios as errors. Then when i select 1 radio the error disappears, but when doing a from.reset() which will clear the selected radio, it will generate an error since no radios are selected.

I have found no way to circumvent this. I've tried using setCustomValidity('') but did not work. Also temporarily disabling validation and re enabling it will also not work.

For the the only way is to completely remove the from from the dom and regeneration it. Removing only the radio buttons and regenerating them will not work (atleast with the same ids).

Any idea?

See fiddle: http://jsfiddle.net/KDkvE/
Do not select an option and press 'Next'. Then press reset. In firefox this will not clear the red borders around the radio buttons.

<form>
<option name='test' type='radio' value='1' required/>
<option name='test' type='radio' value='2' required/>

<input type="submit" name="submitbutton" id="submitbutton" value="next">
<input type='reset' value='Reset'/>
</form>

Upvotes: 1

Views: 1448

Answers (1)

Gordon Rouse
Gordon Rouse

Reputation: 301

Was searching for an elegant solution to this myself, but as no one clever has so far answered it, I will have to provide this un-elegant solution:

<input type="radio" name="radio_button_name" onclick="for(i=0;i&lt;this.form[ this.name ].length;i++){ this.form[ this.name ][i].setCustomValidity('') }" oninvalid="custom validation message">

The problem seems to be that you need to reset the validating custom message for each radio button, not just the one you are clicking.

Upvotes: 1

Related Questions