HTML5 Form Doğrulamasını Tetikleme

Birkaç farklı alan kümesine sahip bir formum var. Alan kümelerini kullanıcılara birer birer görüntüleyen bazı Javascript'im var. HTML5 doğrulamasını destekleyen tarayıcılar için bundan yararlanmak isterim. Ancak, bunu kendi şartlarımla yapmam gerekiyor. JQuery kullanıyorum.

Bir kullanıcı bir sonraki alan setine geçmek için bir JS Bağlantısına tıkladığında, geçerli alan setinde doğrulamanın gerçekleşmesi ve sorunlar varsa kullanıcının ilerlemesini engellemem gerekiyor.

İdeal olarak, kullanıcı bir öğeye odaklanmayı kaybettiğinde doğrulama gerçekleşecektir.

Şu anda javascript kullanan novalidate var Yerel yöntemi kullanmayı tercih eder. :)

Yerel doğrulama kullanıcı arayüzünü tetikleyemezsiniz, ancak rasgele giriş öğelerinde doğrulama API'sinden kolayca yararlanabilirsiniz:

$('input').blur(function(event) {
    event.target.checkValidity();
}).bind('invalid', function(event) {
    setTimeout(function() { $(event.target).focus();}, 50);
});

İlk olay checkValidity, odağı kaybettiği anda her girdi öğesinde invalidtetiklenir ; öğe buysa , karşılık gelen olay tetiklenir ve ikinci olay işleyicisi tarafından yakalanır. Bu, odağı öğeye geri getirir, ancak bu oldukça can sıkıcı olabilir, hataları bildirmek için daha iyi bir çözümünüz olduğunu varsayıyorum. İşte yukarıdaki kodumun çalışan bir örneği .

TL; DR: Eski tarayıcıları umursamıyor musunuz? Kullanın form.reportValidity().

Eski tarayıcı desteğine mi ihtiyacınız var? Okumaya devam etmek.

Aslında ise elle tetik doğrulama mümkün.

Yeniden kullanılabilirliği iyileştirmek için yanıtımda düz JavaScript kullanacağım, jQuery'ye gerek yok.

Aşağıdaki HTML formunu varsayın:

<form>
  <input required>
  <button type="button">Trigger validation</button>
</form>

Ve şimdi JavaScript'teki UI öğelerimizi alalım:

var form = document.querySelector('form')
var triggerButton = document.querySelector('button')

Internet Explorer gibi eski tarayıcılar için desteğe ihtiyacınız yok mu? Bu sizin içindir.

Tüm modern tarayıcılarda desteklemekreportValidity() üzerine yöntemini formelemanları.

triggerButton.onclick = function () {
    form.reportValidity()
}

İşte bu, bitirdik. Ayrıca, bu yaklaşımı kullanan basit bir CodePen burada .

Eski tarayıcılar için yaklaşım

Aşağıda, reportValidity()eski tarayıcılarda nasıl öykünülebileceğinin ayrıntılı bir açıklaması bulunmaktadır .

Ancak, bu kod bloklarını projenize kopyalayıp yapıştırmanıza gerek yoktur - sizin için hazır bir ponyfill / polyfill vardır.

reportValidity()Desteklenmeyen yerlerde , tarayıcıyı biraz kandırmamız gerekir. Peki ne yapacağız?

1. Formun geçerliliğini arayarak kontrol edin form.checkValidity(). Bu bize formun geçerli olup olmadığını söyleyecek, ancak doğrulama kullanıcı arayüzünü göstermeyecektir.
2. Form geçersizse, geçici bir gönderme düğmesi oluşturur ve üzerine bir tıklama tetikleriz. Form geçerli olmadığından, aslında gönderilmeyeceğini biliyoruz , ancak kullanıcıya doğrulama ipuçları gösterecek. Geçici gönder düğmesini derhal kaldıracağız, böylece kullanıcı hiçbir zaman görmeyecektir.
3. Form geçerliyse, hiçbir şekilde müdahale etmemize ve kullanıcının ilerlemesine izin vermemize gerek yoktur.

Kodda:

triggerButton.onclick = function () {
  // Form is invalid!
  if (!form.checkValidity()) {
    // Create the temporary button, click and remove it
    var tmpSubmit = document.createElement('button')
    form.appendChild(tmpSubmit)
    tmpSubmit.click()
    form.removeChild(tmpSubmit)

  } else {
    // Form is valid, let the user proceed or do whatever we need to
  }
}

Bu kod hemen hemen tüm yaygın tarayıcılarda çalışacaktır (IE11'e kadar başarıyla test ettim).

İşte çalışan bir CodePen örneği.

Bir dereceye kadar, triggerformu göndermeden HTML5 form doğrulama yapabilir ve kullanıcıya ipuçları gösterebilirsiniz!

Biri doğrulamak için, biri göndermek için olmak üzere iki düğme

Bu tıklamanın formun doğrulamasını kontrol etmeyi amaçladığını belirtmek onclickiçin genel bir bayrak (örneğin justValidate) ayarlamak için doğrulama düğmesinde bir dinleyici ayarlayın .

Ve bayrağı yanlış onclickolarak ayarlamak için gönder düğmesine bir dinleyici ayarlayın justValidate.

Ardından onsubmit, formun işleyicisinde justValidate, dönen değere karar vermek için bayrağı kontrol edin preventDefault()ve formu göndermeyi durdurmak için çağırırsınız. Bildiğiniz gibi, HTML5 form doğrulaması (ve kullanıcıya GUI ipucu) onsubmitolaydan önce gerçekleştirilir ve form GEÇERLİ olsa bile, yanlış veya çağırma döndürerek formu göndermeyi durdurabilirsiniz preventDefault().

Ve HTML5'te formun doğrulamasını kontrol etmek için bir yönteminiz vardır: the form.checkValidity(), then formun kodunuzda doğrulanıp doğrulanmadığını öğrenebilirsiniz.

Tamam, işte demo: http://jsbin.com/buvuku/2/edit

A List Apart'ta yayınlanan bu makale bunu açıklamak için oldukça iyi bir iş çıkardığından , bunları sıfırdan yazmanın benim için değeceğinden emin değilim . MDN ayrıca HTML5 formları ve doğrulaması için kullanışlı bir kılavuza sahiptir (API ve ayrıca ilgili CSS'yi kapsar).

Alan kümelerine HTML5 doğrulaması eklemek veya kaldırmak biraz kolaydır.

 $('form').each(function(){

    // CLEAR OUT ALL THE HTML5 REQUIRED ATTRS
    $(this).find('.required').attr('required', false);

    // ADD THEM BACK TO THE CURRENT FIELDSET
    // I'M JUST USING A CLASS TO IDENTIFY REQUIRED FIELDS
    $(this).find('fieldset.current .required').attr('required', true);

    $(this).submit(function(){

        var current     = $(this).find('fieldset.current')
        var next        = $(current).next()

        // MOVE THE CURRENT MARKER
        $(current).removeClass('current');
        $(next).addClass('current');

        // ADD THE REQUIRED TAGS TO THE NEXT PART
        // NO NEED TO REMOVE THE OLD ONES
        // SINCE THEY SHOULD BE FILLED OUT CORRECTLY
        $(next).find('.required').attr('required', true);

    });

});

İşin püf noktasını buldum: Sadece form targetözelliğini kaldırın , ardından formu doğrulamak ve ipuçlarını göstermek için bir gönder düğmesi kullanın, formun JavaScript aracılığıyla geçerli olup olmadığını kontrol edin ve sonra her şeyi gönderin. Aşağıdaki kod benim için çalışıyor:

<form>
  <input name="foo" required>
  <button id="submit">Submit</button>
</form>

<script>
$('#submit').click( function(e){
  var isValid = true;
  $('form input').map(function() {
    isValid &= this.validity['valid'] ;
  }) ;
  if (isValid) {
    console.log('valid!');
    // post something..
  } else
    console.log('not valid!');
});
</script>

HTML Kodu:

<form class="validateDontSubmit">
....
<button style="dislay:none">submit</button>
</form>
<button class="outside"></button>

javascript (Jquery kullanarak):

<script type="text/javascript">

$(document).on('submit','.validateDontSubmit',function (e) {
    //prevent the form from doing a submit
    e.preventDefault();
    return false;
})

$(document).ready(function(){
// using button outside trigger click
    $('.outside').click(function() {
        $('.validateDontSubmit button').trigger('click');
    });
});
</script>

Umarım bu sana yardımcı olur

Giriş alanı için

<input id="PrimaryPhNumber" type="text" name="mobile"  required
                                       pattern="^[789]\d{9}$" minlenght="10" maxLength="10" placeholder="Eg: 9444400000"
                                       class="inputBoxCss"/>

$('#PrimaryPhNumber').keyup(function (e) {
        console.log(e)
        let field=$(this)
        if(Number(field.val()).toString()=="NaN"){
            field.val('');
            field.focus();
            field[0].setCustomValidity('Please enter a valid phone number');
            field[0].reportValidity()
            $(":focus").css("border", "2px solid red");
        }
    })

Çok karmaşık (özellikle eşzamansız) bir doğrulama süreci olduğunda, basit bir çözüm vardır:

<form id="form1">
<input type="button" onclick="javascript:submitIfVeryComplexValidationIsOk()" />
<input type="submit" id="form1_submit_hidden" style="display:none" />
</form>
...
<script>
function submitIfVeryComplexValidationIsOk() {
    var form1 = document.forms['form1']
    if (!form1.checkValidity()) {
        $("#form1_submit_hidden").click()
        return
    }

    if (checkForVeryComplexValidation() === 'Ok') {
         form1.submit()
    } else {
         alert('form is invalid')
    }
}
</script>

Bu sorunu çözmenin başka bir yolu:

$('input').oninvalid(function (event, errorMessage) {
    event.target.focus();
});