HTML5 양식 유효성 검사 기본 오류 메시지를 어떻게 변경하거나 제거 할 수 있습니까?

예를 들어 textfield. 이 필드는 필수이며 숫자 만 필요하며 값의 길이는 10이어야합니다. 길이가 5 인 값을 가진 양식을 제출하려고하면 기본 오류 메시지가 나타납니다.Please match the requested format

<input type="text" required="" pattern="[0-9]{10}" value="">

1. HTML 5 양식 유효성 검사 오류 기본 메시지를 어떻게 변경합니까?
2. 첫 번째 포인트를 수행 할 수있는 경우 일부 특성 파일을 작성하고 해당 파일에 사용자 정의 오류 메시지를 설정하는 방법이 있습니까?

Ankur 답변에서 버그를 발견 했으며이 수정으로 수정했습니다.

 <input type="text" pattern="[a-zA-Z]+"
    oninvalid="setCustomValidity('Plz enter on Alphabets ')"
    onchange="try{setCustomValidity('')}catch(e){}" />

잘못된 입력 데이터를 설정 한 후 입력을 수정하고 양식을 보낼 때 발생하는 버그입니다. 죄송합니다! 당신은 이것을 할 수 없습니다. 파이어 폭스와 크롬에서 테스트했습니다.

pattern =을 사용하면 제목 속성에 넣은 모든 것을 표시하므로 JS가 필요하지 않습니다.

<input type="text" required="" pattern="[0-9]{10}" value="" title="This is an error message" />

<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Plz enter on Alphabets ')" />

다른 게시물 에서이 코드를 찾았습니다.

HTML :

<input type="text" pattern="[0-9]{10}" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);"  />

자바 스크립트 :

function InvalidMsg(textbox) {

     if(textbox.validity.patternMismatch){
        textbox.setCustomValidity('please enter 10 numeric value.');
    }    
    else {
        textbox.setCustomValidity('');
    }
    return true;
}

Fiddle Demo

jQuery를 사용하여 브라우저 유효성 검사 메시지가 문서에 나타나지 않도록하려면 :

$('input, select, textarea').on("invalid", function(e) {
    e.preventDefault();
});

다음을 수행하여이 경고를 제거 할 수 있습니다.

<input type="text" pattern="[a-zA-Z]+"
    oninvalid="setCustomValidity(' ')"
/>

사용자 정의 메시지를 하나의 공백으로 설정하십시오.

제약 조건 유효성 검사 API를 통해 변경할 수 있습니다. http://www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity

당신이 쉬운 솔루션을 원한다면, 당신은 civem.js을 바위 수, 여기에 사용자 입력 검증 오류 메시지 자바 스크립트 LIB 다운로드 : https://github.com/javanto/civem.js 라이브 데모 여기 : http://jsfiddle.net/ hleinone / njSbH /

setCustomValidity를 사용하면 기본 유효성 검사 메시지를 변경할 수 있습니다. 간단한 사용 예는 다음과 같습니다.

var age  =  document.getElementById('age');
    age.form.onsubmit = function () {
    age.setCustomValidity("This is not a valid age.");
 };

실수로 지금 방법을 찾았습니다. 다음을 사용해야합니다. data-error : ""

<input type="username" class="form-control" name="username" value=""
placeholder="the least 4 character"
data-minlength="4" data-minlength-error="the least 4 character"
data-error="This is a custom Errot Text fot patern and fill blank"
max-length="15" pattern="[A-Za-z0-9]{4,}"
title="4~15 character" required/>

Mahoor13 답변에서 버그를 발견했지만 루프에서 작동하지 않으므로이 수정으로 수정했습니다.

HTML :

<input type="email" id="eid" name="email_field" oninput="check(this)">

자바 스크립트 :

function check(input) {  
    if(input.validity.typeMismatch){  
        input.setCustomValidity("Dude '" + input.value + "' is not a valid email. Enter something nice!!");  
    }  
    else {  
        input.setCustomValidity("");  
    }                 
}  

루프에서 완벽하게 실행됩니다.

이것은 html5 유효성 검사의 다양한 속성을 확인하는 데 매우 유용한 링크입니다.

https://dzone.com/articles/custom-validation-messages

그것이 누군가를 돕기를 바랍니다.

여기에서 볼 수 있듯이 :

입력 필드를 수정 한 후 html5가 유효하지 않습니다.

오류 메시지를 수정하면 오류 메시지를 표시 할 수 있습니다.

<input type="text" pattern="[a-zA-Z]+"
oninvalid="this.setCustomValidity(this.willValidate?'':'your custom message')" />

HTML 5 유효성 검사 사용을위한 사용자 지정 오류 메시지를 설정하려면

oninvalid="this.setCustomValidity('Your custom message goes here.')"

사용자가 유효한 데이터 사용을 입력 할 때이 메시지를 제거하려면

onkeyup="setCustomValidity('')"

이것이 효과가 있기를 바랍니다. 즐겨 ;)

이것은 Chrome에서 나를 위해 작동합니다.

    <input type="text" name="product_title" class="form-control" 
required placeholder="Product Name" value="" pattern="([A-z0-9À-ž\s]){2,}"
oninvalid="setCustomValidity('Please enter on Producut Name at least 2 characters long')"

간단히 <form> 태그에 "novalidate"를 사용할 수 있습니다

자세한 내용을 보려면 여기를 클릭하십시오