Home/ Questions/Q 8508739
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T03:14:35+00:00

I’m using the jQuery Validation Engine to validate some form fields. Everything’s working well

  • 0

I’m using the jQuery Validation Engine to validate some form fields. Everything’s working well except in IE7 and IE8.

The style sheet has a :focus class, which gives them a blue box-shadow when the form field is focussed on:

input:focus { outline: none; -webkit-box-shadow: 0px 0px 2px 1px #06c !important; -moz-box-shadow: 0px 0px 1px 1px #06c; box-shadow: 0px 0px 1px 1px #06c; }

I’m using jQuery to add a class to the form fields when they’re not valid (as defined by the jQuery Validation Engine,) so that those fields can have a red box-shadow:

input.error { outline: none; -webkit-box-shadow: 0px 0px 2px 1px #c00 !important; -moz-box-shadow: 0px 0px 1px 1px #c00; box-shadow: 0px 0px 1px 1px #c00; }

This works great…in IE9, Firefox, and Chrome. It doesn’t work in IE8 or 7. (There was a party when we stopped supporting IE6.) I tried installing PIE.htc and adding a style option that indicated a border for those elements, rather than a box-shadow, but that didn’t seem to help and it caused some other display weirdness with the error-bubbles, so I removed PIE.htc. Then I tried having a separate style definition, enclosed in IE-conditional tags, that specified borders for those inputs, but still it didn’t work. Here’s my conditional-CSS:

<!--[if lte IE 8]>
<style type="text/css">
input:focus { border: 1px solid #06c; }
input.error { border: 1px solid #c00; }
</style>
<![endif]-->

…help?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Not everything is supported in those browsers. Just live with it and find an alternative, like showing an additional message. Or you could embed the input element inside a div:

    ​div.invalid {
    display: inline-block; 
    border: 1px solid red;
}​

<div class="invalid">
        <input type="text"/>
</div>​​​​​​​​​​​​​​​​​

    If you start adding element like this, I would do that though JQuery too, and preferably in a separate piece of code that is included only in IE7 and 8, so you can easily drop it once you don’t need it anymore. Or you could choose to always use the div, and just style div.invalid input{...} for other browsers.

    • 0