Membuat Form Validasi Input Mengggunakan Validatr

SETIKOM kembali hadir dengan postingan yang seperti biasanya dengan tema Seputar Ilmu Komputer. Sekarang pertama kalinya posting tentang programming atau bahasa kerennya ngoding . Judul artikel kali ini yaitu Membuat Form Validasi Input Menggunakan Validatr , sebelumnya apa itu Validatr ?

Validatr merupakan library javascript untuk menambah fitur validasi pada sebuah form html. Tentu saja validasi disini dilakukan pada client-side bukan server-side. Validatr juga menggunakan html5, jadi tentu hanya browser yang support html 5 yang bisa menjalankannya. Validatr bisa didapat kan disini , setelah di download bagaimana cara menggunakannya? oke, simak langkah-langkah dibawah ini:

1. Buat Form HTML

Yang pertama adalah membuat form HTML, Validatr berfungsi untuk menambahkan fitur pada form kalu gak ada formnya gimana menggunakannya :v .Biar lebih enak diliat saya bikin contoh formnya pake bootstrap, dan juga jangan lupa jquery-nya :

<html>
<head>
<title>Validatr | SETIKOM</title>
<link href="assets/css/bootstrap.css" rel="stylesheet"/>
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet"/>
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/js/jquery.js" type="text/javascript"></script>
</head>
<body>
<div class="span4">
        <form action="./" novalidate="">
            <div class="alert alert-success">Form Valid!</div>
            <label for="email">Email</label>
            <input type="email" id="email" name="email" required="">
            <div>                   
                <input type="reset" class="btn btn-small" value="Reset">
                <input type="submit" class="btn btn-small btn-primary" value="Submit">
            </div>
        </form>
       </div>
       </body>
</html>

 

2. Memanggil atau Meng-Include File validatr.js
Langkah yang kedua adalah menempelkan validatr, sangat mudah. Yang pertama menginclude file validatr.js dan yang kedua memanggil fungsi jquery. Untuk yang pernah menggunakan jquery pasti tidak asing lagi 🙂 .
<script src="assets/js/validatr.js" type="text/javascript"></script>
<script>
jQuery(function ($) {
$('form').validatr();
});
</script>

 

3. Testing Validasi
Yang terakhir seperti yang biasanya dilakukan setelah ngoding, yap ! testing. Coba dengan mengetik input email asal-asalan, maka border input akan berwarna merah.
begitupun sebaliknya, jika mengetik email dengan benar maka border akan berwarna biru. Validatr  sangat cocok di gabung dengan bootstrap.
Begitulah cara penggunaannya, masih banyak lagi fitur dari Validatr. Seperti Input Number,Date,Color dll, untuk mendowload source code dari tutorial diatas Klik Disini ! Dan untuk mencoba fitur Validatr yang lain bisa dibuka di situs github validatr .

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.