gurumutant

JQuery - Validasi Form Client-Side

Nov 23rd, 2020
1,494
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Form Validation Menggunakan JQuery</title>
  5.     <script src="lib/jquery.min.js"></script>
  6.     <script type="text/javascript">
  7.         // memastikan dokumen selesai dimuat
  8.         $(function(){
  9.             $('#btnSimpan').click(function(){
  10.                 var valid = true;
  11.                 if ($('#txtNama').val().trim() == '') { // mengecek kekosongan value
  12.                     $('#pesanNama').show().html('Anda harus mengisikan nama!<br>').css('color','red').fadeOut(2000);
  13.                     valid = false;
  14.                 }
  15.                 if ($('#txtKomentar').val().trim() == '') { // mengecek kekosongan value
  16.                     $('#pesanKomen').show().html('Anda harus mengisikan komentar!<br>').css('color','red').fadeOut(2000);
  17.                     valid = false;
  18.                 }                
  19.                
  20.                 if (valid) {
  21.                     var nama = $('#txtNama').val();
  22.                     var komen = $('#txtKomentar').val();
  23.                     $('#frmKomen').fadeOut('slow');
  24.                     $('#pesanSubmit').html(nama+", komentar Anda berhasil disimpan!<br>Komentar Anda:<br>"+komen);
  25.                 }
  26.             });
  27.         });
  28.     </script>
  29. </head>
  30. <body>
  31. <h1>Form Submission Validation</h1>
  32. <form id="frmKomen">
  33.     <label for="txtNama">Nama</label><br>
  34.     <input type="text" id="txtNama" name="txtNama"><br>
  35.     <span id="pesanNama"></span>
  36.     <label for="txtKomentar">Komentar</label><br>
  37.     <textarea id="txtKomentar" name="txtKomentar"></textarea><br>
  38.     <span id="pesanKomen"></span>
  39.     <input type="button" value="Simpan" id="btnSimpan">
  40. </form>
  41. <p id="pesanSubmit"></p>    
  42. </body>
  43. </html>
RAW Paste Data