Memicu Validasi Formulir HTML5

Saya memiliki formulir dengan beberapa kumpulan bidang yang berbeda. Saya memiliki beberapa Javascript yang menampilkan kumpulan bidang kepada pengguna satu per satu. Untuk browser yang mendukung validasi HTML5, saya ingin memanfaatkannya. Namun, saya harus melakukannya dengan persyaratan saya. Saya menggunakan JQuery.

Ketika pengguna mengklik Tautan JS untuk pindah ke fieldset berikutnya, saya memerlukan validasi terjadi pada fieldset saat ini dan memblokir pengguna agar tidak bergerak maju jika ada masalah.

Idealnya, saat pengguna kehilangan fokus pada suatu elemen, validasi akan terjadi.

Saat ini sudah tidak valid lagi berjalan dan menggunakan Javascript. Lebih suka menggunakan metode asli. :)

Anda tidak dapat memicu UI validasi bawaan, tetapi Anda dapat dengan mudah memanfaatkan API validasi pada elemen input arbitrer:

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

Peristiwa pertama diaktifkan checkValiditypada setiap elemen masukan segera setelah kehilangan fokus, jika elemen tersebut invalidmaka peristiwa yang sesuai akan diaktifkan dan dijebak oleh penangan peristiwa kedua. Yang ini menetapkan fokus kembali ke elemen, tetapi itu bisa sangat mengganggu, saya berasumsi Anda memiliki solusi yang lebih baik untuk memberi tahu tentang kesalahan. Berikut adalah contoh kerja kode saya di atas .

TL; DR: Tidak peduli dengan browser lama? Gunakan form.reportValidity().

Butuh dukungan browser lama? Lanjutkan membaca.

Ini sebenarnya adalah mungkin untuk memicu validasi secara manual.

Saya akan menggunakan JavaScript biasa dalam jawaban saya untuk meningkatkan kegunaan kembali, tidak diperlukan jQuery.

Asumsikan bentuk HTML berikut:

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

Dan mari ambil elemen UI kita di JavaScript:

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

Tidak memerlukan dukungan untuk browser lama seperti Internet Explorer? Ini adalah untuk Anda.

Semua browser modern mendukung para reportValidity()metode pada formelemen.

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

Itu dia, kita sudah selesai. Juga, inilah CodePen sederhana yang menggunakan pendekatan ini.

Pendekatan untuk browser lama

Di bawah ini adalah penjelasan rinci bagaimana reportValidity()bisa ditiru di browser lama.

Namun, Anda tidak perlu menyalin & menempelkan blok kode itu sendiri ke dalam proyek Anda - ada ponyfill / polyfill yang tersedia untuk Anda.

Jika reportValidity()tidak didukung, kita perlu sedikit menipu browser. Jadi apa yang akan kita lakukan?

1. Periksa validitas formulir dengan menelepon form.checkValidity(). Ini akan memberi tahu kami jika formulir tersebut valid, tetapi tidak menampilkan UI validasi.
2. Jika formulir tidak valid, kami membuat tombol kirim sementara dan memicu klik di atasnya. Karena formulir tidak valid, kami tahu itu tidak akan benar - benar dikirim, namun, itu akan menunjukkan petunjuk validasi kepada pengguna. Kami akan segera menghapus tombol kirim sementara, sehingga tidak akan pernah terlihat oleh pengguna.
3. Jika formulirnya valid, kami tidak perlu mengganggu sama sekali dan membiarkan pengguna melanjutkan.

Dalam kode:

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

Kode ini akan berfungsi di hampir semua browser umum (saya telah berhasil mengujinya ke IE11).

Berikut adalah contoh CodePen yang berfungsi.

Dalam beberapa hal, Anda BISA triggermemvalidasi formulir HTML5 dan menunjukkan petunjuk kepada pengguna tanpa mengirimkan formulir!

Dua tombol, satu untuk validasi, satu untuk kirim

Setel onclickpendengar pada tombol validasi untuk menyetel bendera global (katakanlah justValidate) untuk menunjukkan klik ini dimaksudkan untuk memeriksa validasi formulir.

Dan setel onclickpendengar pada tombol kirim untuk menyetel justValidatebendera ke false.

Kemudian di onsubmithandler formulir, Anda memeriksa bendera justValidateuntuk memutuskan nilai yang dikembalikan dan meminta preventDefault()untuk menghentikan pengiriman formulir. Seperti yang Anda ketahui, validasi formulir HTML5 (dan petunjuk GUI kepada pengguna) dilakukan sebelum onsubmitacara, dan bahkan jika formulirnya VALID Anda dapat menghentikan pengiriman formulir dengan mengembalikan false atau memanggil preventDefault().

Dan, di HTML5 Anda memiliki metode untuk memeriksa validasi formulir: itu form.checkValidity(), kemudian Anda dapat mengetahui apakah formulir tersebut divalidasi atau tidak dalam kode Anda.

Oke, berikut demo nya: http://jsbin.com/buvuku/2/edit

Saya tidak yakin apakah pantas bagi saya untuk mengetik semua ini dari awal karena artikel yang diterbitkan di A List Apart ini menjelaskannya dengan cukup baik. MDN juga memiliki panduan praktis untuk formulir dan validasi HTML5 (mencakup API dan juga CSS terkait).

Agak mudah untuk menambahkan atau menghapus validasi HTML5 ke kumpulan bidang.

 $('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);

    });

});

Sepertinya saya menemukan triknya: Hapus saja targetatribut formulir , lalu gunakan tombol kirim untuk memvalidasi formulir dan menunjukkan petunjuk, periksa apakah formulir valid melalui JavaScript, lalu posting apa pun. Kode berikut berfungsi untuk saya:

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

Kode Html:

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

javascript (menggunakan Jquery):

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

Semoga ini bisa membantu Anda

Untuk bidang masukan

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

Jika ada proses validasi yang sangat kompleks (terutama asinkron), ada solusi sederhana:

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

Cara lain untuk mengatasi masalah ini:

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