JavaScript 함수에서 HTML5 유효성 검사 메시지를 수동으로 표시하는 방법은 무엇입니까?

Question

JavaScript 함수를 사용하여 프로그래밍 방식으로 HTML5 유효성 검사 오류를 표시하는 방법이 있는지 알고 싶습니다.

이메일 복제본을 확인해야하는 경우에 유용합니다. 예를 들어, 사람이 전자 메일을 입력하고 제출 단추를 누른 다음이 전자 메일이 이미 등록되었거나 다른 사람에게 알려야합니다.

다른 오류 표시 방법이 있지만 유효성 검사 오류 메시지 표시 방법 (예 : 유효하지 않은 전자 메일, 빈 필드 등)과 동일한 방식으로 표시하려고합니다.

JSFiddle :http://jsfiddle.net/ahmadka/tjXG3/

HTML 형태 :

<form> 
    <input type="email" id="email" placeholder="Enter your email here..." required> 
    <button type="submit">Submit</button> 
</form> 

<button id="triggerMsg" onclick="triggerCustomMsg()">Trigger Custom Message</button> 

자바 스크립트 :

function triggerCustomMsg() 
{ 
    document.getElementById("email").setCustomValidity("This email is already used"); 

} 

위의 코드는 사용자 지정 메시지를 설정,하지만 자동으로 표시되지. 그 사람이 제출 버튼이나 뭔가를 누르면 표시됩니다.

Answer 1

이 질문은 년 전에 물었지만, 그것이 내가 최근에뿐만 아니라 발생 좋은 질문이다되었다 ...

내 솔루션 (I는 "데이터 무효"로 갔다 속성을 만들 자바 스크립트를 사용하는 것이 었습니다)가 각각 <input>, <select> 및 <textarea>이고, validationMessage을 포함한다.

label:after { 
    content: attr(data-invalid); 
    ... 
} 

그런

일부 CSS

는 ... 오류 메시지가 표시됩니다.

제한

각 요소를 제공하는이 유일한 작품은 레이블이 있습니다. <input> 요소는 :after 의사 요소를 가질 수 없으므로 요소 자체에 특성을 넣으면 작동하지 않습니다.

데모

http://jsfiddle.net/u4ca6kvm/2/

Answer 2

이제하지만 아직 Internet Explorer에서, 그것은 크롬, 파이어 폭스, 오페라, 안드로이드 브라우저에서 구현있어 순간의 HTMLFormElement.reportValidity() 메소드를 사용할 수 있습니다

또는 사파리 (MDN의 Browser compatibility 참조). 제출 이벤트를 트리거하지 않고 유효성 오류를보고하며 동일한 오류가 표시됩니다.

Answer 3

@Diego에서 언급 한 것처럼 form.reportValidity();를 사용할 수 있습니다.
가 IE를 지원하기 위해 사파리이 polyfill을 포함, 그냥 작동합니다

이

if (!HTMLFormElement.prototype.reportValidity) { 
    HTMLFormElement.prototype.reportValidity = function() { 
     if (this.checkValidity()) return true; 
     var btn = document.createElement('button'); 
     this.appendChild(btn); 
     btn.click(); 
     this.removeChild(btn); 
     return false; 
    } 
}