Làm cách nào để hiển thị thông báo xác thực HTML5 theo cách thủ công từ một hàm JavaScript?

Question

Tôi muốn biết nếu có bất kỳ cách nào để hiển thị lỗi xác thực HTML5 theo chương trình, sử dụng hàm JavaScript.

Điều này rất hữu ích cho các tình huống cần kiểm tra trùng lặp email. Ví dụ: một người nhập email, nhấn nút Gửi và sau đó phải được thông báo rằng email này đã được đăng ký hoặc một cái gì đó.

Tôi biết có nhiều cách khác để hiển thị lỗi như vậy, nhưng tôi muốn hiển thị nó giống như cách thông báo lỗi xác thực được hiển thị (ví dụ: email không hợp lệ, trường trống, v.v.).

JSFiddle: Mẫuhttp://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> 

JavaScript:

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

} 

Đoạn mã trên thiết lập thông báo tùy chỉnh, nhưng nó không tự động hiển thị. Nó chỉ được hiển thị khi người đó nhấn nút gửi hoặc một cái gì đó.

Answer 1

Câu hỏi này đã được hỏi hơn một năm trước, nhưng đó là một câu hỏi hay mà tôi vừa gặp phải cũng ...

Giải pháp của tôi là sử dụng JavaScript để tạo một thuộc tính (tôi đã đi với "dữ liệu không hợp lệ") trên <label> của mỗi <input>, <select> và <textarea> chứa validationMessage.

Sau đó, một số CSS ...

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

... sẽ hiển thị thông báo lỗi.

Hạn chế

này chỉ hoạt động cung cấp mỗi phần tử có một nhãn. Nó sẽ không hoạt động nếu bạn đặt thuộc tính vào chính phần tử, vì các phần tử <input> không thể có các thành phần giả :after.

Demo

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

Answer 2

Bây giờ bạn có thể sử dụng phương pháp HTMLFormElement.reportValidity(), tại thời điểm nó được thực hiện trong Chrome, Firefox, Opera, và các trình duyệt Android, nhưng chưa có trong trình duyệt Internet Explorer hoặc Safari (xem Browser compatibility tại MDN). Nó báo cáo lỗi hợp lệ mà không kích hoạt sự kiện gửi và chúng được hiển thị theo cùng một cách.

Answer 3

Được menton bởi @Diego, bạn có thể sử dụng form.reportValidity();
Để hỗ trợ trình duyệt IE và Safari bao gồm polyfill này, nó chỉ hoạt động:

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; 
    } 
}