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
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 🙂
