Cara Membuat Validasi Umur dengan Jquery

Untuk pertmuan kali ini kita masih membahas tentang sebuah validasi dimana, pada hari ini saya akan memberikan cara membuat validasi umur dengan jquery, yang nantinya jika teman-teman mengisinya dengan asal akan muncul sebuah notif bahwa tidak boleh ini itu, tidak hanya asal ya, jika teman-teman tida mengisinya juga akan muncul sebuah alert bahwa form harus di isi seperti itu, oke langsung saja bagaimana cara membuatnya simak terus ya teman-teman.

Cara membuat validasi umur dengan jquery, seperti judulnya kita masih menggunakan jquery ya, untuk kali ini saya akan membuat sedikit lengkap ya, cuma sedikit aja tapi ya teman-teman tidak terlalu kompleks, cukup simple ko teman-teman, jadi yang nanti saya buat meliputi seperti:

1. Tidak boleh kosong
2. harus angka
3. batas maksimal umur yang harus di input dan minimal umur

Udah sepertinya hanya segitu saja ya teman-teman, dan method yang saya pakai meliputi:

• hide()
• even click()
• parseint()
• val()
• show()
• preventDefault()
• html()
• text()

Masih ingat ya teman-teman tentang method di atas, oke sekarang langsung saja kita lihat contoh kodenya ya:

<html>
  <head>
    <title>Cara Membuat Validasi Umur dengan Jquery</title>
    <script type="text/javascript" src="js/jquery.js">
    </script>
	<style type="text/css">
      .label {float: left; width: 120px; }
      .kotak_info {width: 200px; }
      .error { color: red; padding-left: 10px; }
      .submit { margin-left: 125px; margin-top: 10px;}
    </style>
	<script type="text/javascript">
      $(document).ready(function(){
        $(".error").hide();
        $(".verifikasi").hide();
        $(".submit").click(function(e){
          var parse = parseInt($(".kotak_info").val());
          var max = $(".kotak_info").val().length;
          e.preventDefault()
          if($(".kotak_info").val()== ""){
            $(".error").show();
            $(".hasilError").text("mohom masukan inputan satu aja")
          }else if(!parse){
            $(".error").show();
            $(".hasilError").text("mohom masukan numerik ")
          }else if(max >= 4){
            $(".error").show();
            $(".hasilError").text("/HELOOO!!! situ manusia atau MUMMY/ mana ada umur segitu")
          }else if($(".kotak_info").val() < 17 || $(".kotak_info").val() > 60 ){
            $(".error").show();
            var tes = $(".kotak_info").val();
            $(".hasilError").html("anda memasukan <u  style='color:cyan'><b>( "+tes+" )</b></u> umur hanya boleh di atas 17 thn hinggan 59 thn ");
          }else{
            $(".error").hide();
            $(".verifikasi").show();
            $(".hasilveri").html("<p style='color: green'> Nah Gitu dong pinter, Oke Lanjut</p>")
          } 
        })
        
      })
    </script>
  </head>
  <body>
    <form id="signup" method="post" action="">
    <div>
	    <span class="label">Masukkan Usia Anda </span>
  		<input type="text" class="kotak_info" name="usia"/>
  		<div class="error"><span class="hasilError"></span></div>
      <div class="verifikasi"><span class="hasilveri"></span></div>
	  </div>
      <input class="submit" type="submit" value="Submit">
    </form>
  </body>
</html>

Coba di lihat lalu copy saja untuk melihat hasilnya ya teman-teman, tampilannya saya buat simple ko teman-teman, dan saya rasa cukup sampai disini belajar kita tentang Cara membuat validasi umur dengan jquery, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.