Chrome이 빈 필드에 "Please Fill Out this Field"툴팁을 표시하는 이유는 무엇입니까?
제 고객으로부터 연락을 받아 일부 필드에 "이 필드를 입력하십시오"라는 메시지와 함께 툴팁이 표시된다는 사용자 불만이있었습니다. 내가들은 내용을 믿을 수 없었지만 클라이언트가 맞습니다. 최신 Chrome 버전을 사용하면 일부 필드에 내 유효성 검사기와 나란히이 메시지와 함께 브라우저 툴팁이 표시됩니다!
뭐가 문제 야? 내가 무엇을 놓치고 있습니까?
감사.
편집하다:
내 사용자 컨트롤에 의해 생성 된 HTML은 다음과 같습니다.
<input name="tbMontante" type="text" maxlength="8" size="10" tbMontante" class="Montantetextfield"
FieldName="Montante"
Required="True"
AllowDecimalValues="True"
/>
편집하다:
내 doctype은 다음과 같습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
내 브라우저가 HTML 5를 사용하여 구문 분석해야합니까?
HTML5 필수 속성 을 사용하고 있습니까?
그러면 Chrome 10에서 사용자에게 필드를 채우라는 풍선을 표시합니다.
https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate
양식에서 유효성 검사를 비활성화 할 수 있습니다.
넣어 novalidate="novalidate"에 <form>태그입니다.
<form novalidate="novalidate">
...
</form>
XHTML에서는 속성 최소화가 금지되어 있으며 novalidate 속성은
<form novalidate="novalidate">.
http://www.w3schools.com/tags/att_form_novalidate.asp
웹 키트 브라우저에서 Html5 팝업 / 풍선을 중지하려면 다음 CSS를 사용하십시오.
::-webkit-validation-bubble-message { display: none; }
다른 질문에서 언급했듯이 :
그 사실과 관련된 문제는 당신이 자신의 비표준 속성 (처음에는하지 말았어야하는)을 발명했고 이제 새로운 표준화 된 속성 (또는 표준화 과정의 속성)이 그들과 충돌하고 있다는 것입니다. .
적절한 해결책은 발명 된 속성을 완전히 제거하고 클래스 ( class="Montantetextfield fieldname-Montante required allow-decimal-values") 와 같은 적절한 것으로 바꾸 거나 JavaScript에 저장하는 것입니다.
var validationData = {
"Montante": {fieldname: "Montante", required: true, allowDecimalValues: true}
}
적절한 솔루션이 실행 가능하지 않은 경우 이름을 바꿔야합니다. 이 경우에는 접두사를 사용해야합니다 data-... 왜냐하면 HTML5에서 그러한 목적으로 예약되어 있고 무언가와 충돌 할 가능성이 적기 때문입니다.하지만 여전히 충돌 할 수 있으므로 첫 번째 해결책을 진지하게 고려해야합니다. 변화.
브라우저 유효성 검사를 트리거하는 컨트롤에 "formnovalidate"속성을 추가해야합니다. 예 :
<input type="image" id="fblogin" formnovalidate src="/images/facebook_connect.png">
"필수"속성이있는 하나 이상의 필드가 포함 된 html 양식이있는 경우 Chrome (최근 버전에서)은 양식을 제출하기 전에 이러한 필드의 유효성을 검사하고 채워지지 않은 경우 사용자를 돕기 위해 일부 도구 설명이 사용자에게 표시됩니다. 제출 된 양식 받기 (예 : "이 필드를 작성하십시오").
양식에서이 브라우저 내장 유효성 검사를 방지하려면 양식 태그에 "novalidate" 속성을 사용할 수 있습니다 . 이 양식은 브라우저에서 확인되지 않습니다.
<form id="form-id" novalidate>
<input id="input-id" type="text" required>
<input id="submit-button" type="submit">
</form>
Chrome (v.56은 내가 사용하고 있지만 일반적으로 적용되는 AFAIK)에서 title = ""(단일 공백)을 설정하면 자동 제목 텍스트가 무시되고 아무것도 표시되지 않습니다. (빈 문자열로 만들려고하면 설정되지 않은 것처럼 처리하고받은 자동 도구 설명 텍스트를 추가합니다.)
Google 크롬 확장 프로그램을 만드는 동안 발견했기 때문에 다른 브라우저에서는 테스트하지 않았습니다. 일단 다른 브라우저로 포팅하면 (필요한 경우에도) 작동하는지 확인할 수 있습니다.
Hey, we just did a global find-replace, changing Required=" to jRequired=". Then you just change it in the jquery code as well (jquery_helper.js -> Function ValidateControls). Now our validation continues as before and Chrome leaves us alone! :)
ReferenceURL : https://stackoverflow.com/questions/5392882/why-is-chrome-showing-a-please-fill-out-this-field-tooltip-on-empty-fields
'programing' 카테고리의 다른 글
| Rails 3 — Bundler / Capistrano 오류 (0) | 2021.01.17 |
|---|---|
| 여러 인수가있는 xargs (0) | 2021.01.17 |
| 'onclick'이벤트를 트리거하는 요소의 ID를 이벤트 처리 함수에 전달하는 방법 (0) | 2021.01.17 |
| 문자열에서 마지막 점과 일치하는 정규식 (0) | 2021.01.17 |
| rake db : create가 postgresql에서 "데이터베이스가 존재하지 않음"오류를 발생시킵니다. (0) | 2021.01.17 |