Soru HTML5 istemci tarafı doğrulama hata balonlarını programlı olarak nasıl görüntülerim?


Bir form / gönderme içeriği dışında HTML5 istemci tarafı doğrulamasını kullanmaya çalışıyorum, ancak doğrulama hata balonlarının nasıl görüntüleneceğini göremiyorum. Aşağıdakileri göz önünde bulundur:

<input type="text" id="input" pattern="[0-9]" required oninvalid="alert('yes, invalid')">
<button onclick="alert(document.getElementById('input').checkValidity())">Check</button>

Her şey beklendiği gibi çalışır, checkValidity değerinden doğru değer döndürülür ve geçersiz olay gönderilir ve görüntülenir, ancak doğrulama hatası balonunu programlı olarak nasıl görüntülerim?


17
2017-11-27 07:13


Menşei




Cevaplar:


Bu balondan bahsediyorsanız:

Validation bubble in Firefox

Bunun yerine ScottR'ın bu cevaba yaptığı yorumu görün.

... sonra testlerim hem Firefox’un hem de Chrome’un arama sırasında görüntülediğini gösteriyor. checkValidity  <form> ile sarılmış bir öğe üzerinde (test durumu), fakat bağımsız bir öğede değil (test durumu).

Hiçbir form ve spesifikasyon yokken gösterilecek bir mekanizma yok gibi görünüyor. bile söylemiyor programatik yanıt olarak görüntülenmelidir checkValidity çağrıları (eleman veya form üzerinde) - sadece bir form gönderirken.

Öyleyse, şimdilik göndermeyseniz bile, öğelerinizi bir formda sarın.

Daha da iyisi, kendi doğrulama kullanıcı arayüzünüzü kullanın, bu, bu müstakil alanda tarayıcılardaki gelecekteki değişikliklerden sizi koruyacaktır.


5
2017-11-27 20:14



Teşekkür ederim. Bana öyle geliyor ki kabarcıklar değil kontrolde iken, eleman üzerinde veya formda olsun; Yalnızca formun gönderildiği zaman (örneğin, etkinliğin sunulmasını engellemek için işleyiciden yanlış döndürebilir), formun gönderilmesiyle birlikte görüntüleniyor gibi görünürler.
Bu kabul edilen cevap doğru değil. Chrome 19, 20 ve 21, arama yaparken doğrulama balonlarını göstermiyor element.checkValidity(); Bir hataya sahip ilk öğe, kullanıcı formu gönderen bir düğmeyi tıkladığında balonda gösterilen hatayı gösterir. - Scott R
@ScottR: değiştirilen cevapta test çantasına bakın. Cevabın neden doğru olmadığını düşündüğünden emin değilim. - Nickolay
Tıklamak <button> öğe, hata iletisinin görünürlüğünü tetikleyen formu gönderir. checkValidity() çağrı, iletinin görünmesine neden olan şey değil; ekleme return false; sonuna kadar onclick kod, hata iletisinin görünmemesini engeller çünkü tıklama olayı forma gelmez (daha sonra bir gönderim etkinliğini tetikler). spec varsayılan olduğunu belirtir type bir düğmenin submitve bunu değiştirirseniz type="button"Ayrıca, hatanın gösterilmesini de engeller. - Scott R
@ScottR: açıklama için teşekkürler! Teorinizi doğrulamadım, ama doğru görünüyor. (Bu dava için SO görgü kurallarının ne olduğundan emin değilsiniz!) - Nickolay


Kullanmayı deneyin required="required" ve kurtulmak oninvalid işleyiciye gerçekten ihtiyacınız olmadıkça.

http://blog.mozilla.com/webdev/2011/03/14/html5-form-validation-on-sumo/

Bu çalışmanın örneği: https://support.mozilla.com/en-US/users/register


0
2017-11-27 20:03



Aslında sadece required="required" yeterli olmalı. - batman


Yanlış alanlara manuel olarak "invalid" özelliğini ayarlayın. Küçük örnek:

var form = $('#myForm').get(0);
if(typeof formItem.checkValidity != 'undefined' && !formItem.checkValidity()) {
    $('input:required').each(function(cnt, item) {
        if(!$(item).val()) {
            $(item).attr('invalid', 'invalid');
        }
    });
    return false;
}

-1
2017-07-17 14:32