크롬이 표시되지 않습니다. jQuery 또는 직접 CSS 속성으로 설정된 클래스

Question

이것은 약간의 디자인/CSS 질문처럼 보일 수 있지만 실제로 도움이 필요합니다.

이

그것은 크롬을 제외하고 상상할 수있는 모든 브라우저에서 작동 페이지 http://library.permilia.com/Gavin/version2.0_beta/lead.html

입니다.

그것이 작동하는 것은 테두리를 1px solid # f00 테두리로 설정하는 클래스 .error를 적용한다는 의미입니다. 어떤 이유로 든 크롬에서는 무엇을 바꿔도 변경할 수 없습니다!

아무도 아이디어가 없습니까?

Answer 1

그래서 ... 답변은 양식 유효성 검사를 포함하여 Chrome에서 HTML5 입력 요소를 구현 중이므로 JS 코드가 실행되지 않는 것입니다. 따라서 필드를 정확히 채우지 않으면 유효성 확인 코드가 실행되지 않습니다!

HTML5에서 required 속성은 부울이며 true 또는 false입니다. the spec에 따르면 브라우저는 문제 필드에서 invalid 이벤트를 발생시켜야합니다. 원하는 경우 그 시점에서 기본 차단 동작을 취소 할 수 있습니다. 그러나 attr('required')을 시도하면 스크립트가 다시 작동하지 않습니다.과 같은 값이 아닌 HTML5를 사용하여 Chrome에서 true 또는 false을 Chrome으로 반환합니다. 이 작업 할 경우

그래서 당신은이 두 가지를 추가해야합니다 다음

$(":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') : ""; 

필요에 따라 스위치 문을 변경하십시오.

마지막으로 생각 : 당신은 또한 (일명 감지 기능) 정말 멋진 접근 방식을, 대신이 작업을 수행 할 수 있습니다 :

랩이와 현재 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()); 
    }); 
} 

Here is a demo을 Chrome에서 작동 할 두 번째 버전 및 현재/베타 버전의 Opera가 포함될 수 있습니다.

Answer 2

귀하의 CSS 파일은 이 아니며 "배경색"으로 설정되어 있습니다. 그것은 "* 배경색"을 설정합니다. 인터넷 익스플로러가 해킹되는 경우 일종의 "real"스타일 속성 (별표가없는 "배경색")을 설정해야합니다.