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

1DMF · Apr 23, 2014

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 · Apr 23, 2014

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 · Apr 28, 2014

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 · Apr 28, 2014

Hi

1DMF said:
I have a form that I am using the HTML5 'required' attribute.

1DMF said:
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 · May 1, 2014

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

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

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

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

1DMF

Programmer

feherke

Programmer

1DMF

Programmer

feherke

Programmer

1DMF

Programmer

Similar threads

Part and Inventory Search

Sponsor