Clear :invalid pseudo class from 'required' form fields when blanking form
Clear :invalid pseudo class from 'required' form fields when blanking form
(OP)
Hi,
I have a form that I am using the HTML5 'required' attribute. This is fine except when the form is completed and submitted. I use Ajax to submit the form request, and then blank out the form, once submission is received.
However, when I make the value of the inputs '' (blank), FireFox / IE show the red border implying the input is invalid.
How do I reset the 'invalid', status of the form fields, without removing the highlighting functionality?
Thanks,
1DMF
I have a form that I am using the HTML5 'required' attribute. This is fine except when the form is completed and submitted. I use Ajax to submit the form request, and then blank out the form, once submission is received.
However, when I make the value of the inputs '' (blank), FireFox / IE show the red border implying the input is invalid.
How do I reset the 'invalid', status of the form fields, without removing the highlighting functionality?
Thanks,
1DMF
"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."
"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music
Talk To Other Members
RE: Clear :invalid pseudo class from 'required' form fields when blanking form
Just a first idea. Was the form initially empty ? If yes, maybe you can call the form's reset() method to restore its original state of emptiness. Hopefully that will not trigger the validation.
A second idea : form.innerHTML = form.innerHTML. I mean, force the re-rendering of the form using DOM manipulation. Of course, you will have to reattach dynamically attached event handlers.
Feherke.
feherke.ga
RE: Clear :invalid pseudo class from 'required' form fields when blanking form
Sorry for the delay in replying, I'm currently re-installing my PC after being hit with a FileCoder Trojan, while searching G! for info on this.
The form reset method clears the form but doesn't reset the 'invalid' pseudo class applied to the form.
I'm going to have a play with the removeClass JQuery method to see if it affects pseudo classes, got any thoughts on this?
Gonna take a few more days before I have my local devel environment restored!
Cheers,
1DMF
"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."
"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music
RE: Clear :invalid pseudo class from 'required' form fields when blanking form
I do not think jQuery ( or any kind of JavaScript ) can manipulate the browser's internal status information through CSS. Maybe if you change the required attribute, will work.
Feherke.
feherke.ga
RE: Clear :invalid pseudo class from 'required' form fields when blanking form
Scenario...
1. Click form submit when blank -> correctly highlights required fields.
2. Fill in form and submit -> the invalid highlighting goes away when you add content to the form fields.
3. AJAX post form -> When form 'reset' is issued, the invalid highlighting shows on all form fields?
So I tried
CODE
$('#help_hub *').attr('required',false); $('#help_hub_form')[0].reset(); $('#help_hub *').attr('required',true);Same thing, the invalid highlighting shows on all form fields?
If I don't re-apply the required attributes, then the invalid highlighting doesn't show.
I've decided to not spend any more time on this, it is only happening in FireFox, not IE, Opera or Chrome, so it must be an FF implementation issue, rather than it being 'way it works'.
Cheers,
1DMF
"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."
"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music