jQuery: неверная форма HTML 5 с обязательным элементом select

Question

Я использовал $('select[required]').is(':invalid'), если браузер поддерживает атрибут шаблона if(Modernizr.input.pattern) {}, и он отлично работает в Firefox 4-7, но у Chrome и Safari есть проблемы.

Все остальные проверки работают нормально, просто требуется выбрать меню, т.е. <select required><option></option></select>

Вот мой jsfiddle: http://jsfiddle.net/mbCbt/. По сути, вы выбираете выпадающий элемент, и он предназначен для его проверки.

В Firefox выбор 'test' скажет, что он действителен. Выбор «пожалуйста, выберите» будет означать, что он недействителен.

В Safari / Chrome, выбор «test» будет означать «недействительный», а затем «Please select» сделает его действительным. Выбор теста снова сделает его недействительным. Оттуда выберите test2, и он будет VALID, затем снова выберите test, и на этот раз он будет действительным.

Я предполагаю, что это jQuery, потому что браузер распознает его действительным из CSS ...

Мысли? Я понимаю, что на самом деле никакой официальной поддержки этой функции нет (не в jquery kb), но я надеюсь, что есть и другой способ обойти это. Я ухудшил проверку валидации для старых браузеров, так что, может быть, я должен просто вернуться к ней для webkit?

Answer 1

Выглядит для меня как ошибка Safari. Валидатор правильный, но только второй раз он вызывается. Когда вы звоните (': недействительно'), он возвращает предыдущую проверку.

Я попытался разбудить ваш пример и вызвать (this.validity ()), но он возвращает то же самое. Точно только CSS!

Я зашла в тупик, как легко получить это - DOM не возвращает значение CSS. Я попытался проверить $ (this) .css ('border') и this.style.borderColor, чтобы получить результат, без кубиков.

UPDATE Событие change () запускается до того, как произойдет какая-либо проверка. Размещение оповещения («здесь»); перед вашим .is (': invalid'); показывает, что элемент по-прежнему «красный» из недопустимого атрибута CSS.

Если вы попытаетесь выполнить проверку по истечении заданного времени, через window.setTimeout (doValidateTest (это), 10) или что-то такое, тогда он, скорее всего, вернется правильно.