Clear :invalid pseudo class from 'required' form fields when blanking form

[1DMF]

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

"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

 

[feherke]

Hi

Just a first idea. Was the [tt]form[/tt] initially empty ? If yes, maybe you can call the [tt]form[/tt]'s [tt]reset()[/tt] method to restore its original state of emptiness. Hopefully that will not trigger the validation.

A second idea : [tt]form.innerHTML = form.innerHTML[/tt]. I mean, force the re-rendering of the [tt]form[/tt] using DOM manipulation. Of course, you will have to reattach dynamically attached event handlers.


Feherke.
feherke.ga

 

[1DMF]

Hey Feherke,

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

 

[feherke]

Hi

I have a form that I am using the HTML5 'required' attribute.

I'm going to have a play with the removeClass JQuery method to see if it affects pseudo classes, got any thoughts on this?

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 [tt]required[/tt] attribute, will work.


Feherke.
feherke.ga

 

[1DMF]

Well that doesn't work either.

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

$('#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