cara membuat validasi tanggal dengan jquery dengan regexp

Membuat Validasi adalah hal yang harus di gunakan ketika kita membuat sebuah form, kenapa harus, karena dengan membuat validasi di sebuah form, kita di jauhi dari tangan jahil, dimana inputan kadang tidak sesuai yang harus di inputkan, jadi ketika seseorang memasukan inputan yang tidak sesuai program akan menampilkan notifikasi error, atau semacamnya, mungkin di antara teman-teman pernah melihat ya, notif error atau pembritahuan, cara yang benar memasukan di sebuah form itu apa, oke disini saya akan coba membuat satu contoh validasi yaitu cara membuat validasi tanggal dengan jquery. jangan kemana-mana simak terus ya.

Disini dengan kita membuat validasi atau cara membuat validasi tanggal dengan jquery, jadi ketika seseorang atau user memasukan sebuah tanggal harus sesuai yang sudah saya formatkan dan disini saya membuatnya dengan:

Template atau framework materialize ya teman-teman supaya ada efek dan rapi
Sperti judulnya saya membuatnya dengan menggunakan jquery ya.
dan untuk mecocokan dengan bantuan regexp ya teman-teman.
oke saya rasa cukup kita lanjutkan lagi

Sebenarnya saya di materialize saya hanya mengambil sebuah formnya saja ya teman-teman, tapi tidak apa-apa supaya rapi dan ada efeknya, oke langsung saja cara membuatnya seperti ini:

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
      <title>Cara Membuat Validasi Tanggal dengan Jquery</title>
      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <style type="text/css">
        .error { color: red; padding-left: 10px; }
      </style>
    </head>

    <body>
      <form id="signup" method="post" action="">        
      <div class="row">
        <div class="col s4"></div>
        <div class="input-field col s4">
          <h4>Cara Membuat Validasi Tanggal dengan Jquery</h4>
          <input value="" id="first_name2" type="text" class="validate" placeholder="dd/mm/yyyy atau mm/dd/yyyy">
          <!-- <label class="active" for="first_name2">Masukan Tanggal</label>  -->
          <span class="error"></span> <br>        
          <button class="btn waves-effect waves-light submit" type="submit" name="action">Submit
            <i class="material-icons right">send</i>
          </button>       
        </div>
        <div class="col s4"></div>        
      </div>         
      </form>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script type="text/javascript">
        $(document).ready(function() {
          $(".error").hide();
          $(".submit").click(function(e){
            e.preventDefault();
            var value = $(".validate").val();
            if($(".validate").val() == ""){
              $(".error").show().html("maaf tidak boleh kosong");
            }
            else if(value.match(/\b\d{1,2}[\/-]\d{1,2}[\/-]\d{2,4}\b/)){
              $(".error").hide()
            }else{
              $(".error").show().html("Maaf inputan tanggal tidak disarankan tidak di sarankan")
            }
          })
        });   
      </script>
      <script type="text/javascript" src="js/materialize.min.js"></script>        
    </body>
  </html>

<!DOCTYPE html>

<html>

<head>

<title>Cara Membuat Validasi Tanggal dengan Jquery</title>

.error { color: red; padding-left: 10px; }

</style>

</head>

<body>

<h4>Cara Membuat Validasi Tanggal dengan Jquery</h4>

<button class="btn waves-effect waves-light submit" type="submit" name="action">Submit

</button>

</div>

</div>

</form>

$(document).ready(function() {

$(".error").hide();

$(".submit").click(function(e){

e.preventDefault();

var value = $(".validate").val();

if($(".validate").val() == ""){

$(".error").show().html("maaf tidak boleh kosong");

}

else if(value.match(/\b\d{1,2}[\/-]\d{1,2}[\/-]\d{2,4}\b/)){

$(".error").hide()

}else{

$(".error").show().html("Maaf inputan tanggal tidak disarankan tidak di sarankan")

}

})

});

</script>

</body>

</html>

Sebenarnya hal yang terpenting dalam kita membuat validasi atau cara membuat validasi tanggal dengan jquery, kita bisa fokus kepada sebuah regexp itu ya teman-teman. jadi regex itulah yang membuat kita bisa memfilter sebuah validasi tanggal. oke bagaiman hasilnya seperti ini:

supaya teman-teman tidak bingung saya membuat sebuah placeholder ya, untuk mencontohkan membuat inputannya, coba kita masukan tidak sesuai format apa yang akan terjadi.

Tampil error ya, jadi yang harus teman-teman input adalah dengan format dd/mm/yyyy atau mm/dd/yyyy, oke saya rasa cukup sampai disini dulu belajar kita tentang cara membuat validasi tanggal dengan jquery, semoga teman-teman paham dan sampai jumpa pada artikel selanjutnya terimakasih.

Cara Membuat Validasi Tanggal dengan Jquery

Facebook DUMET School

Categories