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

[1DMF]

Hi,

I have some css

: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 .

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...

    // 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

 

[1DMF]

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

/* 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

    // 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...

<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" />
[b]<span class="tickcross"></span>
[/b]

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