Cara Memvalidasi Form Input Pada Browser

Berurusan dengan bentuk form di Web terkadang membuat kita pusing, tapi ini akan menarik untuk kita bahas. Anda sanggup melaksanakan banyak kustumisasi dalam desain, pada label dan bahkan pada otentikasi. Dengan banyak fitur gres yang tersedia di HTML5, “Jay Morrow” menciptakan Validatr yang mengandalkan atribut HTML5, ini sanggup mempermudah anda untuk melaksanakan validasi form.

 Berurusan dengan bentuk form di Web terkadang membuat kita pusing Cara Memvalidasi Form Input Pada Browser

Validatr yaitu plugin jQuery di-browser gratis. Ini akan otomatis memberi peringatan dalam bentuk goresan pena merah jikalau pengguna yang menginput nilai yang tidak valid. Hal ini juga sanggup melaksanakan banyak validasi input menyerupai email, nomor, url, range, input warna dan tanggal. 

 Berurusan dengan bentuk form di Web terkadang membuat kita pusing Cara Memvalidasi Form Input Pada Browser

Pesan kesalahan juga tersedia dengan aneka macam pilihan memakai data atribut HTML5. Anda sanggup menyesuaikan elemen pesan kesalahan dengan CSS Anda sendiri, dan plugin mempunyai beberapa gaya CSS yang cukup bagus.
Panduan Dasar 
Untuk memakai Validatr, Sertakan jQuery terbaru dan juga script Validatr dalam proyek Anda.

[<br />
<script src=”http://code.jquery.com/jquery-latest.min.js” type=”text/javascript”></script>
<script src=”js/validatr.js” type=”text/javascript”></script>]

Kemudian panggilan plugin dengan scribe berikut:

[<script>
jQuery(function ($) {
    $(‘form’).validatr();
});
</script>]

HTML Markup 
Seperti disebutkan, Validatr memanfaatkan elemen input untuk bekerja. dan di proses di dalam tag form. Elemen input akan menangani semua jenis bentuk yang berbeda dan pengaturan menggunakan data-attribute HTML5.

Sebagai contoh, saat Anda ingin membuat bentuk nomor, tambahkan type=”number”, misalnya membatasi min dan max nomor. Jika pengguna tidak diperbolehkan untuk meninggalkan form kosong, tambahkan saja atribut required.

Berikut ini yaitu teladan implementasi dasar:

[<form action=”./”>
    <label for=”number”>Number</label>
    <div>
        <input type=”number” id=’number’ step=2 min=1 max=11 name=”number” required>
        <input type=”submit” value=”Submit”>
    </div>
</form>]

Langkah atribut dipakai untuk penambahan nilai saat pengguna mengklik kenaikan atau penurunan, mulai dalam jumlah min ditentukan atau 0. Jika nilai diatur ke “0”, ini berarti memakai kenaikan standar atau meningkat hanya satu point (nilai harus angka positif).
 Berurusan dengan bentuk form di Web terkadang membuat kita pusing Cara Memvalidasi Form Input Pada Browser
Dan inilah akhirnya saat pengguna masukan sebuah nilai yang tidak valid. Misalnya kita memakai 2 untuk langkah yang berarti mulai dari 1, satu-satunya nomor yang valid, mempunyai kenaikan 2, yaitu: 3, 5, 7 dan seterusnya. Nilai maksimum yaitu 11.
 Berurusan dengan bentuk form di Web terkadang membuat kita pusing Cara Memvalidasi Form Input Pada Browser
Untuk daftar lengkap jenis input lain dan dokumentasi, silakan kunjungi halaman Validatr.

Related Posts