Validasi Formulir with jQuery #1

14 Mei 2012

Validasi Formulir with jQuery #1

Pada kesempatan yang sedang ga ada aktifitas ini, (sok sibuk) ane mau tulis tentang cinta antara kisah terpendam PHP dan jQuery, tapi sebelum saya mengorek-oerek hari mereka, ane mau orek-orek (bahasanya..he) jQuery.
apa itu jQuery ? lihat ini. Pada malam hari ini yang berbahagia izinkan saya sedikit menshare bagaimana memvalidasi formulir dengan jQuery. Pembahasan ini ane sudah anggap temen-temen sudah tahu dasar-dasar pemograman website dkk. langsung aja ke TKP gan...cekidot.....

buat file dengan nama formulir.html
<script type="text/javascript"
        src="jquery-1.5.1.min.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
      $("#formulir").submit(function() {
         if ($.trim($("#nama").val()) == "") {
            alert("Nama tidak boleh kosong");
            $("#nama").focus();
            return false;
         }

         if ($.trim($("#hobby").val()) == "") {
            alert("Hobby perlu diisi");
            $("#hobby").focus();
            return false;
         }
      });
   });
</script>
<style type="text/css">
   label {
      float: left;
      width: 100px;
   }
</style>
</head>
<body>
   <form id="formulir" action="info.php" method="post">
      <p>
         <label>Nama: </label>
         <input type="text" id="nama" name="nama"
                value="" />
      </p>
      <p>
         <label>Hobby: </label>
         <input type="text" id="hobby" name="hobby"
                value="" />
      </p>
      <p>
         <input type="submit" id="kirim"
                value="Kirim" />
      </p>
   </form>
</body>