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

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, 사용자 정의 입력 유효성 검사 오류 메시지 JavaScript 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.");
 };

---

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("");  
    }                 
}  

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

---

This is a very good link I found about checking various attributes of html5 validations.

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

Hope it helps someone.

---

I Found a way Accidentally Now: you can need use this: 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/>

---

As you can see here:

html5 oninvalid doesn't work after fixed the input field

Is good to you put in that way, for when you fix the error disapear the warning message.

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

---

To set custom error message for HTML 5 validation use,

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

and to remove this message when user enters valid data use,

onkeyup="setCustomValidity('')"

Hope this works for you. Enjoy ;)

---

This is work for me in 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')"

---

simply you can use "novalidate" for < form > tag

click here for more deteails

참고URL : https://stackoverflow.com/questions/10361460/how-can-i-change-or-remove-html5-form-validation-default-error-messages