Làm cách nào tôi có thể thay đổi hoặc xóa thông báo lỗi mặc định xác thực mẫu HTML5?

Ví dụ tôi có một textfield. Trường là bắt buộc, chỉ các số được yêu cầu và độ dài của giá trị phải là 10. Khi tôi cố gắng gửi biểu mẫu có giá trị là 5, thông báo lỗi mặc định xuất hiện:Please match the requested format

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

1. Làm cách nào để thay đổi các thông báo mặc định của biểu mẫu HTML 5 lỗi?
2. Nếu điểm 1 có thể được thực hiện, vậy có cách nào để tạo một số tệp thuộc tính và đặt trong tệp đó thông báo lỗi tùy chỉnh không?

Tôi đã tìm thấy một lỗi trên câu trả lời của Ankur và tôi đã sửa nó bằng cách sửa này:

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

Lỗi nhìn thấy khi bạn đặt dữ liệu đầu vào không hợp lệ, sau đó sửa lỗi đầu vào và gửi biểu mẫu. Giáo sư! bạn không thể làm điều này. Tôi đã thử nó trên firefox và chrome

Khi sử dụng mẫu = nó sẽ hiển thị bất cứ thứ gì bạn đặt trong tiêu đề, vì vậy không yêu cầu JS chỉ cần làm:

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

Tôi tìm thấy mã này trong một bài viết khác.

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

Để ngăn thông báo xác thực trình duyệt xuất hiện trong tài liệu của bạn, với jQuery:

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

bạn có thể loại bỏ cảnh báo này bằng cách làm như sau:

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

chỉ cần đặt thông điệp tùy chỉnh thành một khoảng trống

bạn có thể thay đổi chúng thông qua api xác thực ràng buộc: http://www.w3.org/TR/html5/constraint.html#dom-cva-setcustomvalids

nếu bạn muốn một giải pháp dễ dàng, bạn có thể loại bỏ civem.js, Thông báo lỗi xác thực nhập liệu tùy chỉnh JavaScript lib tải xuống tại đây: https://github.com/javanto/civem.js bản demo trực tiếp tại đây: http://jsfiddle.net/ hleinone / njSbH /

SetCustomValids cho phép bạn thay đổi thông báo xác thực mặc định. Đây là một sơ đồ đơn giản về cách sử dụng nó.

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

Tôi đã tìm thấy một cách tình cờ Bây giờ: bạn có thể cần sử dụng cách này: lỗi dữ liệu: ""

<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/>

Tôi đã tìm thấy một lỗi trên câu trả lời của Mahoor13, nó không hoạt động trong vòng lặp nên tôi đã sửa nó bằng cách sửa này:

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

Nó sẽ chạy hoàn hảo trong vòng lặp.

Đây là một liên kết rất tốt mà tôi đã tìm thấy về việc kiểm tra các thuộc tính khác nhau của xác thực html5.

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

Hy vọng nó sẽ giúp được ai đó.

Như bạn có thể thấy ở đây:

html5 oninvalid không hoạt động sau khi cố định trường đầu vào

Tốt cho bạn là theo cách đó, vì khi bạn sửa lỗi sẽ từ chối thông báo cảnh báo.

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

Để đặt thông báo lỗi tùy chỉnh cho sử dụng xác thực HTML 5,

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

và để xóa thông báo này khi người dùng nhập dữ liệu hợp lệ,

onkeyup="setCustomValidity('')"

Hy vọng điều này làm việc cho bạn. Thưởng thức ;)

Đây là công việc đối với tôi trong 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')"

đơn giản là bạn có thể sử dụng "novalidate" cho thẻ <form>

bấm vào đây để biết thêm