Membuat Validasi Form sederhana menggunakan Javascript

Belajar Web Design

Update Terakhir pada

Membuat Validasi Form sederhana menggunakan Javascript–
hallo guys..kita Bertemu lagi , Di Artikel saya kali ini akan mencoba berbagi kepada Teman-teman Bagaimana membuat Validasi Form menggunakan Javascript sederhana  Berikut dibawah  ini Contoh Hasil Validasinya

validasi

 

nah diatas adalah contoh validasi yang dibuat dengan javascript , seperti apa sih contoh codingnya berikut dibawah ini contoh coding membuat validasi nya ..


Pertama 

<script type="text/javascript">

    function doinsert() {
        var nama = document.getElementById("nama").value;
        var kota = document.getElementById("kota").value;
        var alamat = document.getElementById("alamat").value;
        var pesan = document.getElementById("pesan").value;
        if(nama==""&&kota==""&&alamat==""&&pesan==""){
            alert('silahkan isi!Nama:..'+'\n'+'silahkan isi!Kota:..'+'\n'+'silahkan isi!alamat:..'+'\n'+'silahkan isi!Pesan:..');
        }
        else if(nama==""){
            alert('nama Harus diisi');
        }
        else if (kota == "") {
            alert("Nama Disi Masa kota enggak ??isi donk");

        }
        else if (alamat == "") {
            alert("isi Data Alamat !");

        }
        else if (pesan == "") {
            alert("Silahkan isi data Pesan");

        }

        else{
          alert('Berhasil !!'+'Nama:'+nama+'\n'+'Kota:'+kota+'\n'+'alamat:'+alamat+'\n'+'Pesan:'+pesan);
             }

    }
</script>

nah guys diatas adalah manipulasi javascript misalnya

        var nama = document.getElementById("nama").value;
        var kota = document.getElementById("kota").value;
        var alamat = document.getElementById("alamat").value;
        var pesan = document.getElementById("pesan").value;

 

kemudian Baru kita Buat conditinal pada saat id nama,kota,alamat dan Pesan di isi..

contohnya

  if(nama==""&&kota==""&&alamat==""&&pesan==""){
            alert('silahkan isi!Nama:..'+'\n'+'silahkan isi!Kota:..'+'\n'+'silahkan isi!alamat:..'+'\n'+'silahkan isi!Pesan:..');
        }
        else if(nama==""){
            alert('nama Harus diisi');
        }
        else if (kota == "") {
            alert("Nama Disi Masa kota enggak ??isi donk");

        }
        else if (alamat == "") {
            alert("isi Data Alamat !");

        }
        else if (pesan == "") {
            alert("Silahkan isi data Pesan");

        }

        else{
          alert('Berhasil !!'+'Nama:'+nama+'\n'+'Kota:'+kota+'\n'+'alamat:'+alamat+'\n'+'Pesan:'+pesan);
             }

dan semua dibungkus dengan Function  bisa dlihat pada contoh pertama diatas functionnya adalah doInsert
baru kita sisipkan pada button type Submit form dengan Atribut Onclick Berikut contoh formnya yang
Dengan Bootsrap form framework css

<div class="container">
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6"><form>
            <div class="form-group">
                <label for="nama">nama</label>
                <input type="text" class="form-control" id="nama" placeholder="nama">
            </div>
            <div class="form-group">
                <label for="kota">Kota</label>
                <input type="text" class="form-control" id="kota" placeholder="Kota">
            </div>
            <div class="form-group">
                <label for="alamat">Password</label>
                <input type="text" class="form-control" id="alamat" placeholder="Alamat">
            </div>
            <div class="form-group">
                <label for="pesan">pesan</label>
                <textarea class="form-control" id="pesan" rows="3"></textarea>
            </div>
            <button class="btn-success" onclick="doinsert()">Simpan</button>
        </form>
        </div>
        <div class="col-md-3"></div>
    </div>
</div>

oke guys Cukup mudah BUkan ?? Coding diatas seperti biasa sekaligus penutup artikel saya kali ini semoga bermanfaat dan selamat mencoba 🙂

No related posts.