×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Contact US

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

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

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

"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

Hi

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

(OP)
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

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

Hi

Quote (1DMF)

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

Quote (1DMF)

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 required attribute, will work.

Feherke.
feherke.ga

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

(OP)
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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close