INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

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.

Jobs

ie not applying invalid psuedo class on checkValidity or exiting form field

ie not applying invalid psuedo class on checkValidity or exiting form field

ie not applying invalid psuedo class on checkValidity or exiting form field

(OP)
Hi,

I have some css

CODE

:required:valid + span.tickcross::after { content: '\f058'; }
:required:invalid + span.tickcross::after { content: '\f057'; } 
:required:valid + span.tickcross {color:green;}
:required:invalid + span.tickcross {color:red;} 

Which is working fine in FF as I fill the form in, I get my green ticks as desired.

As you populate a field, it seems FF re-validates the form and applies the valid pseudo class when you exit the field.. all is good smile.

However, in IE if I enter valid input and leave the field the form isn't revalidated and the invalid pseudo class is still showing a red cross.

So I added some on-blur events...

CODE

// ensure form is revalidated when field is exited
    $('[required]').on('blur',function(){ $('form')[0].checkValidity();}); 

However, even though this event is firing when I exit the input field, still the incorrect pseudo classes aren't being applied in IE.

If I just click on any blank part of the page, outside of another input field, then the correct pseudo class 'content' shows.

Why can't I get IE to correctly re-apply the pseudo classes and update the screen using .checkValidity() ?

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: ie not applying invalid psuedo class on checkValidity or exiting form field

(OP)
I've given up with the pseudo classes for form validation in IE, they simply don't get applied correctly.

Don't know if it's a browser refresh issue or what, but CSS3 form validation pseudo classes work exactly as desired in FF but IE11 is very flaky.

In the end I went with a JQuery solution with my own classes bolted on to the ':required' pseudo class.

CSS

CODE

/* form validation pseudo classes */
span.tickcross  {
    width:15px;
    height:15px;
    display:inline-block;
    margin-top:5px;
    float:right;
    font-family: 'FontAwesome';   
   }
   
:focus:required:invalid {
    background-color:pink;
    opacity:.6;
    }
    
:invalid, .invalid {
    box-shadow: none !important;  
    -moz-box-shadow: none !important;
    outline:none !important;
}
        
/* form validation awesomeness for pseudo class */
:required + span.tickcross::after { content: '\f071'; }
:required + span.tickcross {color:orange;}

:required.invalid + span.tickcross::after { content: '\f057'; }
:required.invalid + span.tickcross {color:red;} 

:required.valid + span.tickcross::after { content: '\f058'; }
:required.valid + span.tickcross {color:green;} 

JQuery / JS

CODE

// handle required fields as IE pseudo classes don't work properly
    $('[required]').on('blur',function(){ checkValid(this);});
    $('[required]').on('focus',function(){ checkValid(this);});
    $('[required]').on('keyup',function(){ checkValid(this);});
    $('[required]').on('keydown',function(){ checkValid(this);});    
    $('[required]').on('change',function(){ checkValid(this);});    
    $('select').on('click',function(){ checkValid(this);});            
    $('[required]').on('invalid',function(){ $(this).addClass('invalid'); });

    function checkValid(ele)
    {
        if(ele.validity.valid)
        {   
            $(ele).removeClass('invalid'); 
            $(ele).addClass('valid'); 
        }
        else
        { 
            $(ele).removeClass('valid'); 
            $(ele).addClass('invalid');        
        }    
    } 

Not ideal but at least IE is correctly applying the right validation classes and toggling my special chars as desired.

Incidentally, I have used empty spans as content in my actual HTML mark-up...

CODE

<label for="url">URL Address</label>
<input placeholder="Please enter full URL of website" type="url" name="URL" id="url" value="<tmpl_var name='URL'>" maxlength="250" />
<span class="tickcross"></span>
 

Is having empty tags as physical content in your mark-up considered good practice?

Should I be dynamically inserting the span's with JS/JQ?

Seeing's as I am using them more for design, and as you can't insert HTML with pseudo elements, what's the best way I should be doing this?

Or are the span's perfectly acceptable?

I'm thinking of adding a 'title' attribute to each span to use for tooltip form fill out guidance, would the spans then be considered content?

You input is appreciated.

Regards,
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!

Resources

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