Cara Membuat Validasi Form dengan JQuery Form Validator

Cara Membuat Validasi Form dengan JQuery Form Validator - Hallo sahabat Teman Koding, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Validasi Form dengan JQuery Form Validator, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel PHP, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat Validasi Form dengan JQuery Form Validator
link : Cara Membuat Validasi Form dengan JQuery Form Validator

Baca juga


Cara Membuat Validasi Form dengan JQuery Form Validator




Selamat datang di blog Teman koding. Pada tutorial kali ini kita hendak belajar membuat validasi form dengan plugin jquery form validator. JQuery Form Validator ialah plugin jquery yang kaya fitur serta multibahasa yang mempermudah buat memvalidasi inputan pengguna dan melindungi markup HTML biar lebih bersih dari kode javascript. JQuery Form Validator sediakan sebagian jenis validasi

yang berbeda semacam require, length, number, email, date, serta sebagainya. Dokumentasinya pula lengkap, gampang buat di pelajari.

Membuat Validasi Form dengan JQuery Form Validator
Membuat Validasi Form dengan JQuery Form Validator

Pertama kita download plugin JQuery Form Validator di website resminya http://www.formvalidator.net.  

Kita juga bisa mengakses plugin JQuery Form Validator langsung secara online menggunakan CDN dengan cara menambahkan kode berikut ini:
<link href="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/theme-default.min.css"
  rel="stylesheet" type="text/css" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>

Contoh program lengkap menggunkan plugin JQuery Form Validator seperti dibawah ini.
<!DOCTYPE html>
<html>
<head>
  <title>temankoding.site</title>
  <link href="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/theme-default.min.css"
    rel="stylesheet" type="text/css" />
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
</head>
<body>
<form action="" id="Form">
<table>
  <tr>
    <td valign="top">Username</td>
    <td><input type="text" name="username" data-validation="length alphanumeric" 
     data-validation-length="3-17" 
     data-validation-error-msg="Nama pengguna harus berupa nilai alfanumerik (3-17 karakter)"></td>
  </tr>
  <tr>
    <td valign="top">Password</td>
    <td> <input type="password" name="pass_confirmation" data-validation="strength" 
     data-validation-strength="1" data-validation-error-msg="Kata sandi tidak cukup kuat"></td>
  </tr>
  <tr>
    <td valign="top">Repeat Password</td>
    <td><input type="password" name="pass" data-validation="confirmation" data-validation-error-msg="Kata sandi tidak dapat dikonfirmasi"></td>
  </tr>
  <tr>
    <td valign="top">Email</td>
    <td><input type="email" name="email" data-validation="email" data-validation-error-msg="Anda belum memberikan alamat email yang benar"></td>
  </tr>
  <tr>
    <td valign="top">Tanggal Lahir</td>
    <td><input type="text" name="birth" data-validation="birthdate" 
     data-validation-help="yyyy-mm-dd" data-validation-error-msg="Anda belum memberikan tanggal yang benar"></td>
  </tr>
   <tr>
    <td valign="top">Negara</td>
    <td><input type="text" name="country" id="country" data-validation="country" data-validation-error-msg="Nilai input salah"></td>
  </tr>
  <tr>
    <td valign="top">Foto Profil</td>
    <td><input name="image" type="file" data-validation="mime size required" 
     data-validation-allowing="jpg, png" 
     data-validation-max-size="300kb" 
     data-validation-error-msg-required="Tidak ada gambar yang dipilih"></td>
  </tr>
  <tr>
    <td valign="top"></td>
    <td><input type="checkbox" data-validation="required" 
     data-validation-error-msg="Anda harus menyetujui persyaratan kami">
     I agree to the <a href="..." target="_blank">terms of service</a>
   </td>
  </tr>
  <tr>
    <td valign="top"></td>
    <td>
      <input type="submit" value="Simpan">
      <input type="reset" value="Reset form">
   </td>
  </tr>
</table>
</form>
<script>
  $.validate({
    modules : 'location, date, security, file',
    onModulesLoaded : function() {
      $('#country').suggestCountry();
    }
  });
</script>
</body>
</html>

Keterangan:
attribute data-validation digunakan untuk menentukan tipe input validasi.
attribute data-validation-length digunakan untuk memvalidasi panjang karakter didalam input.
attribute data-validation-strength digunakan untuk memvalidasi sebuah password.
attribute data-validation-error-msg digunakan untuk menampilkan pesan eror sebuah inputan.

Tutorial membuat validasi form dengan JQuery Form Validator sampai disini. Sekian, semoga bermanfaat. 



Demikianlah Artikel Cara Membuat Validasi Form dengan JQuery Form Validator

Sekianlah artikel Cara Membuat Validasi Form dengan JQuery Form Validator kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Validasi Form dengan JQuery Form Validator dengan alamat link http://www.temankoding.site/2021/04/cara-membuat-validasi-form-dengan.html

Tidak ada komentar untuk "Cara Membuat Validasi Form dengan JQuery Form Validator"