Hello Reader's! if you want to make the Date time format validation in your form then you can use Javascript to validate.
Let's see the example below:-
your html will be go like this:-
<form method="POST" action="/javascript/validate-date/" onsubmit="checkForm2(this); return false;">
<fieldset>
<legend>Event Details</legend>
<label for="field_startdate2">Start Date</label><span><input id="field_startdate2" type="text" size="12" placeholder="dd/mm/yyyy" name="startdate"> <small>(dd/mm/yyyy)</small></span>
<label for="field_starttime2">Start Time</label><span><input id="field_starttime2" type="text" size="12" name="starttime"> <small>(eg. 01:36 or 1:36am)</small></span>
<span><input type="submit"></span>
</fieldset>
</form>
And your javascript will go like this:-
<script type="text/javascript">
function checkForm(form)
{
// regular expression to match required date format
re = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
if(form.startdate.value != '') {
if(regs = form.startdate.value.match(re)) {
// day value between 1 and 31
if(regs[1] < 1 || regs[1] > 31) {
alert("Invalid value for day: " + regs[1]);
form.startdate.focus();
return false;
}
// month value between 1 and 12
if(regs[2] < 1 || regs[2] > 12) {
alert("Invalid value for month: " + regs[2]);
form.startdate.focus();
return false;
}
// year value between 1902 and 2015
if(regs[3] < 1902 || regs[3] > (new Date()).getFullYear()) {
alert("Invalid value for year: " + regs[3] + " - must be between 1902 and " + (new Date()).getFullYear());
form.startdate.focus();
return false;
}
} else {
alert("Invalid date format: " + form.startdate.value);
form.startdate.focus();
return false;
}
}
// regular expression to match required time format
re = /^(\d{1,2}):(\d{2})([ap]m)?$/;
if(form.starttime.value != '') {
if(regs = form.starttime.value.match(re)) {
if(regs[3]) {
// 12-hour value between 1 and 12
if(regs[1] < 1 || regs[1] > 12) {
alert("Invalid value for hours: " + regs[1]);
form.starttime.focus();
return false;
}
} else {
// 24-hour value between 0 and 23
if(regs[1] > 23) {
alert("Invalid value for hours: " + regs[1]);
form.starttime.focus();
return false;
}
}
// minute value between 0 and 59
if(regs[2] > 59) {
alert("Invalid value for minutes: " + regs[2]);
form.starttime.focus();
return false;
}
} else {
alert("Invalid time format: " + form.starttime.value);
form.starttime.focus();
return false;
}
}
alert("All input fields have been validated!");
return true;
}
</script>
Now if the user will make incorrect input an alert box will notify it to user.
0 Comment(s)