ฉันจะเปลี่ยนหรือลบข้อความแสดงข้อผิดพลาดที่เป็นค่าเริ่มต้นในการตรวจสอบความถูกต้องของฟอร์ม 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){}" />

ข้อผิดพลาดที่เห็นเมื่อคุณตั้งค่าข้อมูลอินพุตที่ไม่ถูกต้องจากนั้นแก้ไขอินพุตและส่งแบบฟอร์ม โอ๊ะ! คุณทำสิ่งนี้ไม่ได้ ฉันได้ทำการทดสอบกับ firefox และ chrome แล้ว

เมื่อใช้ pattern = มันจะแสดงสิ่งที่คุณใส่ไว้ในชื่อ attrib ดังนั้น 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);"  />

JAVASCRIPT:

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

ฉันพบวิธีตอนนี้โดยบังเอิญ: คุณสามารถใช้สิ่งนี้ได้: 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)">

javascript:

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 oninvalid ไม่ทำงานหลังจากแก้ไขฟิลด์อินพุต

เป็นสิ่งที่ดีสำหรับคุณที่จะทำเช่นนั้นเพราะเมื่อคุณแก้ไขข้อผิดพลาดจะหายไปจากข้อความเตือน

<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')"

เพียงคุณสามารถใช้ "novalidate" สำหรับแท็ก <form>

คลิกที่นี่เพื่อดูรายละเอียดเพิ่มเติม