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
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...
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
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
.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
Talk To Other Members
RE: ie not applying invalid psuedo class on checkValidity or exiting form field
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
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