HTML5 양식 요소의 유효성 검사 비활성화

양식에서 새 HTML5 양식 유형 <input type="url" />( 예 : 유형에 대한 자세한 정보) 을 사용하고 싶습니다 .

문제는 Chrome이 매우 도움이되고 짜증나는 것을 제외 하고는이 요소를 검증하고 싶다는 것입니다. 기본 제공 유효성 검사에 실패하면 요소에 초점을 맞추는 것 외에 다른 메시지 나 표시가 없습니다. URL 요소를으로 미리 채우 "http://"므로 내 맞춤 확인은 해당 값을 빈 문자열로 취급하지만 Chrome에서는이를 거부합니다. 유효성 검사 규칙을 변경할 수 있으면 작동합니다.

다시 사용으로 되돌릴 수는 type="text"있지만 이러한 새로운 유형의 제안을 사용하여 개선 된 기능을 원합니다 (예 : 모바일 장치에서 사용자 정의 키보드 레이아웃으로 자동 전환).

그래서, 자동 검증을 해제하거나 사용자 정의하는 방법은 무엇입니까?

HTML5에서 양식에 대한 클라이언트 측 유효성 검증을 사용하지 않으려면 양식 요소에 novalidate 속성을 추가하십시오. 전의:

<form method="post" action="/foo" novalidate>...</form>

https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate를 참조 하십시오.

사양을 읽었으며 Chrome에서 일부 테스트를 수행했으며 "잘못된"이벤트를 잡아서 양식 제출을 허용하는 것처럼 보이는 false를 반환하는 경우.

이 HTML과 함께 jquery를 사용하고 있습니다.

// suppress "invalid" events on URL inputs
$('input[type="url"]').bind('invalid', function() {
  alert('invalid');
  return false;
});

document.forms[0].onsubmit = function () {
  alert('form submitted');
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="url" value="http://" />
  <button type="submit">Submit</button>
</form>

다른 브라우저에서는 이것을 테스트하지 않았습니다.

양식에 novalidate 속성을 사용하면 브라우저가 양식을 보내지 못하게됩니다. 브라우저는 여전히 데이터를 평가하고 : valid 및 : invalid 의사 클래스를 추가합니다.

유효하고 잘못된 의사 클래스가 내가 사용하고있는 HTML5 상용구 스타일 시트의 일부이기 때문에 이것을 알았습니다. 방금 의사 클래스와 관련된 CSS 파일의 항목을 제거했습니다. 누군가 다른 해결책을 찾으면 알려주십시오.

가장 좋은 해결책은 텍스트 입력을 사용하고 inputmode = "url"속성을 추가하여 URL 키보드 기능을 제공하는 것입니다. HTML5 사양은 이러한 목적으로 생각되었습니다. type = "url"을 유지하면 모든 경우에 유용하지 않은 구문 유효성 검사를 얻습니다 (구체적으로 허용되며 큰 도움이되지 않는 구문 대신 404 오류를 반환하는지 확인하는 것이 좋습니다).

예를 들어 pattern = "https? : //.+"속성을 사용하여 기본 패턴을 재정의 할 수도 있습니다.

novalidate 속성을 양식에 넣는 것은 양식의 모든 필드에 대한 유효성 검증을 제거하고 예를 들어 이메일 필드에 대한 유효성 검증을 유지할 수 있기 때문에 질문에 대한 정답이 아닙니다.

jQuery를 사용하여 유효성 검사를 비활성화하는 것도 JavaScript없이 작동해야하므로 나쁜 해결책입니다.

필자의 경우 웹 사이트가 필요하고 ftp : // 등이 필요 없기 때문에 URL 입력 앞에 2 개의 옵션 (http : // 또는 https : //)이있는 select 요소를 넣었습니다. 이렇게하면이 이상한 접두사 (Tim Berners-Lee의 가장 큰 후회 및 URL 구문 오류의 주요 원인)를 입력하지 않고 자리 표시 자 (HTTP없이)와 함께 inputmode = "url"을 사용하여 간단한 텍스트 입력을 사용합니다. jQuery와 서버 측 스크립트를 사용하여 웹 사이트의 실제 존재를 확인하고 (404 없음) 삽입 된 경우 HTTP 접두사를 제거합니다 (pattern = "^ ((? http).) * $"와 같은 패턴은 사용하지 않습니다. 더 관용적 인 것이 낫다고 생각하기 때문에 접두사를 넣지 않도록하십시오.)

브라우저의 유효성 검사를 끝내는 대신 http://자리 표시 자 텍스트로 넣을 수 있습니다. 이것은 당신이 연결 한 바로 그 페이지에서 온 것입니다.

자리 표시 자 텍스트

HTML5가 웹 양식에 제공하는 첫 번째 개선 사항은 입력 필드에 자리 표시 자 텍스트 를 설정하는 기능 입니다 . 필드가 비어 있고 초점이 맞지 않으면 입력 필드 안에 자리 표시 자 텍스트가 표시됩니다. 입력 필드를 클릭 (또는 탭)하면 자리 표시 자 텍스트가 사라집니다.

아마 자리 표시 자 텍스트를 본 적이있을 것입니다. 예를 들어, Mozilla Firefox 3.5는 위치 표시 줄에“책갈피 및 기록 검색”이라는 자리 표시 자 텍스트를 포함합니다.

위치 표시 줄을 클릭 (또는 탭)하면 자리 표시 자 텍스트가 사라집니다.

아이러니하게도 Firefox 3.5는 웹 양식에 자리 표시 자 텍스트 추가를 지원하지 않습니다. C'est la vie.

자리 표시 자 지원

IE  FIREFOX SAFARI  CHROME  OPERA   IPHONE  ANDROID
·   3.7+    4.0+    4.0+    ·       ·       ·

고유 한 웹 양식에 자리 표시 자 텍스트를 포함시키는 방법은 다음과 같습니다.

<form>
  <input name="q" placeholder="Search Bookmarks and History">
  <input type="submit" value="Search">
</form>

placeholder속성을 지원하지 않는 브라우저 는 단순히 속성을 무시합니다. 해가없고 파울도 없습니다. 브라우저가 플레이스 홀더 텍스트를 지원하는지 확인하십시오 .

사용자에게 "시작점"을 제공하지 않기 때문에 정확히 동일하지는 않지만 적어도 절반 정도입니다.

매우 유용한 기본 확인 양식을 우회하지 않고 다음 선택기에서 CSS가있는 Chrome 솔루션을 찾았습니다.

form input::-webkit-validation-bubble-message, 
form select::-webkit-validation-bubble-message,
form textarea::-webkit-validation-bubble-message {
    display:none;
} 

이런 식으로 메시지를 사용자 정의 할 수도 있습니다.

이 페이지에서 해결책을 얻었습니다 : http://trac.webkit.org/wiki/Styling%20Form%20Controls

당신의 형태로 novalidate 를 사용 하십시오.

<form name="myForm" role="form" novalidate class="form-horizontal" ng-hide="formMain">

건배!!!

다음은 novalidate를 사용할 때조차 크롬과 오페라가 잘못된 입력 대화 상자를 표시하지 못하게하는 데 사용하는 기능입니다.

window.submittingForm = false;
$('input[novalidate]').bind('invalid', function(e) {
    if(!window.submittingForm){
        window.submittingForm = true;
        $(e.target.form).submit();
        setTimeout(function(){window.submittingForm = false;}, 100);
    }
    e.preventDefault();
    return false;
});

그 불쾌한 유효성 검사 거품을 억제하고 자신의 유효성 검사기를 추가하기 위해 자바 스크립트를 추가 할 수 있습니다.

document.addEventListener('invalid', (function(){
    return function(e) {
      //prevent the browser from showing default error bubble / hint
      e.preventDefault();
      // optionally fire off some custom validation handler
      // myValidation();
    };
})(), true);

양식 요소를 required=""다음 과 같이 표시하면 novalidate=""도움이되지 않습니다.

required유효성 검사 를 피하는 방법 은 요소 를 비활성화하는 것 입니다.

간단한 크롬 확장 프로그램을 설치하고 즉시 https://chrome.google.com/webstore/detail/html5-form-validation-err/dcpagcgkpeflhhampddilklcnjdjlmlb/ 관련 유효성 검사를 비활성화 할 수 있습니다

기본적으로 모든 것이 기본적으로 작동하지만 툴바의 확장 아이콘을 한 번 클릭하여 html5 유효성 검사를 비활성화 할 수 있습니다