<!DOCTYPE html>
<html>
<head>
<title>Form Validation Menggunakan JQuery</title>
<script src="lib/jquery.min.js"></script>
<script type="text/javascript">
// memastikan dokumen selesai dimuat
$(function(){
$('#btnSimpan').click(function(){
var valid = true;
if ($('#txtNama').val().trim() == '') { // mengecek kekosongan value
$('#pesanNama').show().html('Anda harus mengisikan nama!<br>').css('color','red').fadeOut(2000);
valid = false;
}
if ($('#txtKomentar').val().trim() == '') { // mengecek kekosongan value
$('#pesanKomen').show().html('Anda harus mengisikan komentar!<br>').css('color','red').fadeOut(2000);
valid = false;
}
if (valid) {
var nama = $('#txtNama').val();
var komen = $('#txtKomentar').val();
$('#frmKomen').fadeOut('slow');
$('#pesanSubmit').html(nama+", komentar Anda berhasil disimpan!<br>Komentar Anda:<br>"+komen);
}
});
});
</script>
</head>
<body>
<h1>Form Submission Validation</h1>
<form id="frmKomen">
<label for="txtNama">Nama</label><br>
<input type="text" id="txtNama" name="txtNama"><br>
<span id="pesanNama"></span>
<label for="txtKomentar">Komentar</label><br>
<textarea id="txtKomentar" name="txtKomentar"></textarea><br>
<span id="pesanKomen"></span>
<input type="button" value="Simpan" id="btnSimpan">
</form>
<p id="pesanSubmit"></p>
</body>
</html>
Comments
0 B
|0 👍
/0 👎
0 B
|👍
/👎