Home/ Questions/Q 6691417
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T05:44:58+00:00

I’ve been using $(‘select[required]’).is(‘:invalid’) if the browser supports the pattern attribute if(Modernizr.input.pattern) {} ,

  • 0

I’ve been using $('select[required]').is(':invalid') if the browser supports the pattern attribute if(Modernizr.input.pattern) {}, and it works fine in Firefox 4-7, but Chrome and Safari are both having issues.

All other validations work fine, its just required select menus i.e. <select required><option></option></select>

Here’s my jsfiddle: http://jsfiddle.net/mbCbt/. Basically, you select a drop down item, and its meant to validate it.

In firefox, selecting ‘test’ will say its valid. Selecting ‘please select’ will says its invalid.

In Safari/Chrome, selecting ‘test’ will say invalid, then selecting ‘please select’ will make it it VALID. Selecting test again will make it invalid. From there, select test2 and it will be VALID, then select test again, and it will be valid this time.

I assume its a jQuery thing, because the browser is recognising its valid from the CSS…

Thoughts? I realise there isn’t really any official support for the function (not in the jquery kb), but I’m hoping there’s another way around it. I have degraded validation checking for older browsers so maybe I should just drop back to that for webkit?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Looks to me like a Safari bug. The validator is correct, but only the second time it is called. When you call is(‘:invalid’), it’s returning the previous validation.

    I tried forking your example, and calling (this.validity()), but it returns the same thing. Only the CSS is accurate!

    I’m stumped at how to easily get this – the DOM doesn’t return the value of the CSS. I tried checking the $(this).css(‘border’) and this.style.borderColor to get a result, no dice.

    UPDATE
    The change() event is firing before any validation has happened. Putting an alert(‘here’); in front of your .is(‘:invalid’); shows that the element is still “red” from the invalid CSS attribute.

    If you attempt the validation after an elapsed time, via
    window.setTimeout(doValidateTest(this),10)
    or somesuch, then it will likely return correctly.

    • 0