Bagaimana saya bisa mengubah atau menghapus pesan kesalahan default validasi form HTML5?

Misalnya saya punya textfield. Bidang ini wajib, hanya nomor yang diperlukan dan panjang nilainya harus 10. Ketika saya mencoba mengirim formulir dengan nilai yang panjangnya 5, pesan kesalahan standar muncul:Please match the requested format

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

1. Bagaimana saya bisa mengubah kesalahan validasi form HTML 5 pesan default?
2. Jika poin pertama dapat dilakukan, apakah ada cara untuk membuat beberapa file properti dan mengatur file kesalahan pesan kustom?

Saya menemukan bug pada jawaban Ankur dan saya telah memperbaikinya dengan koreksi ini:

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

Bug terlihat saat Anda mengatur data input yang tidak valid, lalu koreksi input dan kirim formulir. Ups! kamu tidak bisa melakukan ini Saya sudah mengujinya di firefox dan chrome

Saat menggunakan pattern = itu akan menampilkan apa pun yang Anda masukkan ke dalam title attrib, jadi tidak perlu JS lakukan:

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

Saya menemukan kode ini di pos lain.

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

Untuk mencegah pesan validasi browser muncul di dokumen Anda, dengan jQuery:

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

Anda dapat menghapus lansiran ini dengan melakukan hal berikut:

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

cukup atur pesan khusus ke satu ruang kosong

Anda dapat mengubahnya melalui api validasi kendala: http://www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity

jika Anda menginginkan solusi yang mudah, Anda dapat menghilangkan civem.js, Pesan Kesalahan Validasi Input Kustom, unduh JavaScript lib di sini: https://github.com/javanto/civem.js demo langsung di sini: http://jsfiddle.net/ hleinone / njSbH /

SetCustomValidity memungkinkan Anda mengubah pesan validasi default. Berikut adalah contoh sederhana tentang cara menggunakannya.

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

Saya Menemukan Cara Secara Tidak sengaja Sekarang: Anda perlu menggunakan ini: 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/>

Saya menemukan bug pada jawaban Mahoor13, itu tidak berfungsi dalam lingkaran jadi saya telah memperbaikinya dengan koreksi ini:

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

Ini akan berjalan dengan sempurna dalam lingkaran.

Ini adalah tautan yang sangat bagus yang saya temukan tentang memeriksa berbagai atribut validasi html5.

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

Semoga ini bisa membantu seseorang.

Seperti yang Anda lihat di sini:

html5 oninvalid tidak berfungsi setelah memperbaiki bidang input

Baik untuk Anda dimasukkan ke dalam cara itu, karena ketika Anda memperbaiki kesalahan menghilang pesan peringatan.

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

Untuk mengatur pesan kesalahan khusus untuk penggunaan validasi HTML 5,

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

dan untuk menghapus pesan ini saat pengguna memasukkan penggunaan data yang valid,

onkeyup="setCustomValidity('')"

Semoga ini berhasil untuk Anda. Nikmati ;)

Ini berfungsi untuk saya di 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')"

cukup Anda dapat menggunakan "novalidate" untuk tag <form>

klik di sini untuk deteail lainnya