Chrome, не отображающий Класс, установленный jQuery или свойством Direct CSS
Это могло бы походить на определенный вопрос о дизайне/CSS, но я действительно нуждаюсь в некоторой помощи.
Это - страница http://library.permilia.com/Gavin/version2.0_beta/lead.html
Это работает над каждым браузеры, вообразимые кроме хрома.
Им работает, я подразумеваю, что это применяет класс .error, который устанавливает границы на тело на 1 пкс #f00, который является красной границей. В хроме по некоторым причинам Вы не можете изменить его независимо от того, что!
Кто-либо получил какие-либо идеи?
2 ответа
Итак ... ответ заключается в том, что ни один из ваших JS-кодов никогда не запускается, потому что Chrome реализует элементы ввода HTML5, включая проверку формы. Таким образом, если вы правильно не заполните поля, ваш код проверки никогда не сработает!
В HTML5 обязательный атрибут является логическим значением true или false. Согласно спецификации , браузер должен запустить событие недопустимое в поле проблемы. В этот момент вы можете отменить поведение блокировки по умолчанию, если хотите. Однако ваш сценарий снова не работает, когда вы пытаетесь выполнить attr ('required') . Он вернет true или false в Chrome, используя HTML5, а не такое значение, как email , как вы ожидали.
Итак, вам нужно добавить эти две части, если вы хотите, чтобы это работало:
$(":input").bind("invalid", function(e){
e.preventDefault(); // Don't block the form submit
});
А затем преобразовать ваш код из
var a = $(this).attr('required');
в
var a = $(this).attr('required') ? $(this).attr('type') : "";
И изменить оператор switch, чтобы он соответствовал, если необходимо
Один последняя идея : вы также можете использовать действительно крутой подход (он же Feature Detection) и сделать это вместо этого:
Оберните внутреннюю часть вашей текущей функции validate: следующим образом:
if(typeof $('<input />')[0].checkValidity === "undefined") {
... existing code ..
} else {
$(':input').bind('invalid', function(){
$(this).addClass('error');
}).blur(function(){
// If valid, turn off error
// If invalid, turn on error
$(this).toggleClass('error', !this.checkValidity());
});
}
Здесь это демо второй версии, которая будет работать в Chrome и, возможно, в текущей / бета-версии Opera.
В вашем файле CSS нет параметра "цвет фона". Это установка "* background-color". Это, вероятно, что-то вроде взлома IE, но вам нужно установить «реальное» свойство стиля («background-color», без звездочки).