HTML5 form doğrulaması varsayılan hata iletilerini nasıl değiştirebilir veya kaldırabilirim?

Mesela bir textfield. Alan zorunludur, yalnızca sayılar gereklidir ve değer uzunluğu 10 olmalıdır. 5 olan bir değer içeren form göndermeye çalıştığımda, varsayılan hata mesajı görüntülenir:Please match the requested format

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

1. HTML 5 form doğrulama hatalarının varsayılan iletilerini nasıl değiştirebilirim?
2. 1. nokta yapılabilirse, bazı özellik dosyaları oluşturmanın ve bu dosyalarda özel hata mesajlarını ayarlamanın bir yolu var mı?

Ankur yanıtında bir hata buldum ve bu düzeltmeyle düzelttim:

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

Geçersiz bir giriş verisi ayarladığınızda, sonra girdiyi düzeltin ve formu gönderin. ayy! bunu yapamazsın. Firefox ve Chrome'da test ettim

Pattern = komutunu kullanırken title özelliğine koyduğunuz her şeyi görüntüler, bu nedenle JS gerekmez:

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

Bu kodu başka bir gönderide buldum.

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

Tarayıcı doğrulama mesajının belgenizde jQuery ile görünmesini önlemek için:

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

bu uyarıyı aşağıdakileri yaparak kaldırabilirsiniz:

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

özel mesajı bir boşluk olarak ayarlamanız yeterlidir

kısıtlama doğrulaması api ile değiştirebilirsiniz: http://www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity

kolay bir çözüm istiyorsanız, civem.js, Özel Giriş Doğrulama Hata Mesajları JavaScript lib buradan indirebilirsiniz: https://github.com/javanto/civem.js buradan canlı demo: http://jsfiddle.net/ hleinone / njSbH /

SetCustomValidity, varsayılan doğrulama mesajını değiştirmenize izin verir.İşte nasıl kullanılacağına dair basit bir örnek.

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

Yanlışlıkla Şimdi bir yol buldum: Bunu kullanmanız gerekebilir: 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 yanıtında bir hata buldum, döngüde çalışmıyor, bu yüzden bu düzeltmeyle düzelttim:

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

Mükemmel döngü içinde çalışacaktır.

Bu, html5 doğrulamasının çeşitli özelliklerini kontrol etme konusunda bulduğum çok iyi bir bağlantı.

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

Umarım birine yardımcı olur.

Burada görebileceğiniz gibi:

html5 oninvalid giriş alanı düzeltildikten sonra çalışmıyor

Bu şekilde koymak sizin için iyidir, çünkü hatayı düzelttiğinizde uyarı mesajını gözden kaçırmayın.

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

HTML 5 doğrulama kullanımı için özel hata mesajı ayarlamak üzere,

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

ve kullanıcı geçerli veri kullanımına girdiğinde bu mesajı kaldırmak için,

onkeyup="setCustomValidity('')"

Umarım bu işe yarar. Zevk almak ;)

Bu benim için Chrome'da iş

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

<form> etiketi için "novalidate" kullanabilirsiniz

daha fazla deteails için buraya tıklayın