Tutorial kali ini suckittrees akan membagikan script tentang Validasi input Tanggal / date dengan Javascript, artikel yang lalu / sebelumnya kita sudah membahas banyak tentang tanggal di pemrograman website ini diantaranya :

• Cara Mengambil Tanggal Dan Waktu Sekarang di PHP
• Membuat Input Tanggal Otomatis
• Manipulasi Format Tanggal Dengan PHP

Untuk artikel kali ini yang pada menu javascript ini , kita akan membuat validasi tanggal , ya.. jadi inputan dalam format date di html5 akan kita validasi lagi dengan menggunakan javascript :

Kita berikan petunjuk format pengisiannya: dd/mm/yyyy, misalnya: input 17/8/1945  Jika user memasukan format tanggal selain yang kita buat, maka akan menampilkan pesan

CODE HTML :

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

Javascript

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
}