Tag Archives: form

Membuat Validasi Tanggal Dengan JavaScript

Leave a reply

Jika kita ingin mendapatkan informasi tanggal dari user kita dapat membuat sebuah field untuk diisi oleh user dengan format tanggal tertentu, seperti pada gambar berikut ini:

Form dengan field tanggal

Kita berikan petunjuk format pengisiannya: dd/mm/yyyy, misalnya: input 17/8/1945 untuk 17 Agustus 1945. Jika user memasukan tanggal yang salah, misalnya 8/17/1945, maka ketika form disubmit kita dapat menampilkan alert “Invalid Date Format. Please correct and submit again.”

Berikut ini coding HTML-nya.

<body>
<form name="formTes" action="tesform.html" method="get"  onsubmit="return cekData();">
<table>
<tr><td>Nama:</td><td><input type="text" name="nama"
maxlength="35" size="35" /></td>
<tr><td>Alamat:</td><td><input type="text" name="alamat"
maxlength="60" size="60" /></td>
<tr><td>Kota:</td><td><input type="text" name="kota" value=""
maxlength="20" size="20" /></td>
<tr><td>Kode Pos:</td><td><input type="text" name="kodepos"
maxlength="5" size="6" /></td>
<tr><td>Tgl Lahir:</td><td><input type="text" name="lahir" /> <b>Valid date format:</b> dd/mm/yyyy</td>
<tr><td>e-mail:</td><td><input type="text"
name="email" /></td>
<tr><td colspan="2"><input name="kirim" type="submit" value="Kirim" />
<button type="submit" name="button1" onclick="confirm_clear();">Clear</button>
</td></tr>
</table>
</form>
</body>

Validasi dapat diberikan pada saat tombol submit dengan event onclick pada formTes akan di-check apakah field tanggal lahir telah diisi dengan benar.

Berikut ini coding JavaScript untuk validasi field tanggal lahir:

function checkdate()
{    var validformat=/^\d{2}\/\d{2}\/\d{4}$/ //Basic check for format validity
var returnval=false
if (!validformat.test(formTes.lahir.value))
alert("Invalid Date Format. Please correct and submit again.")
else
{     //Detailed check for valid date ranges
var dayfield=formTes.lahir.value.split("/")[0]
var monthfield=formTes.lahir.value.split("/")[1]
var yearfield=formTes.lahir.value.split("/")[2]
var dayobj = new Date(yearfield, monthfield-1, dayfield)
if ((dayobj.getMonth()+1!=monthfield)||(dayobj.getDate()!=dayfield)||(dayobj.getFullYear()!=yearfield))
alert("Invalid Day, Month, or Year range detected. Please correct and submit again.")
else
returnval=true
}
if (returnval==false) formTes.lahir.select()
return returnval
}

Untuk mencobanya silakan download full script in PDF, select all (Ctrl+A) copy paste ke notepad save as html.