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>
<script src="assets/js/validatr.js" type="text/javascript"></script>
<script>
jQuery(function ($) {
$('form').validatr();
});
</script>
