[jQuery] JQuery validation plugin - custom validation for group of html elements

I have a set of combo boxes on a HTML form which act as a Date control:

<div id="datecheck">
<select id="datecheck_y" name="datecheck_y">
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value=""></option>
</select>
<select id="datecheck_m" name="datecheck_m" >
<option value="1">Jab</option>
<option value="2">Feb</option>
<option value=""></option>
</select>
<select id="datecheck_d" name="datecheck_d" >
<option value="1">1</option>
<option value="31">31</option>
<option value=""></option>
</select>
</div>

No I want to validate whether the user has left any value (year/month/day)
as blank, or if the values form a valid date (example invalid date:
2009(datecheck_y),Feb(datecheck_m),31(datecheck_d)

For this I wrote two custom rules in JQuery, here is my approach:

I have two custom rules (REQUIRED_DATE, VALID_DATE):

$().ready(function() {

$.validator.addMethod("REQUIRED_DATE", function(value, element)
{
CheckBlankDate(element);
}, "Date cannot be left blank");

$.validator.addMethod("VALID_DATE", function(value, element) {
return this.optional(element) || CheckDate(element);
}, "Date should be valid");

$("#form1").validate({
rules: {
datecheck: { REQUIRED_DATE: true,VALID_DATE:
true }

},
messages: {
datecheck:
{
REQUIRED_DATE: "Date is required",
VALID_DATE: "Date should be valid"
}
}
});

});

Here are the CheckDate, CheckDateBlank JavaScript functions for reference:

function ValidateDate(y, mo, d, h, mi, s) {
var date = new Date(y, mo - 1, d, h, mi, s, 0);
var ny = date.getFullYear();
var nmo = date.getMonth() + 1;
var nd = date.getDate();
var nh = date.getHours();
var nmi = date.getMinutes();
var ns = date.getSeconds();

var flag = (ny == y && nmo == mo && nd == d && nh == h && nmi
== mi && ns == s);
return (flag);
}

function CheckDate(dateElement) {
var y, mo, d, h, mi, s;

y = document.getElementById(dateElement.id + '_y').value;
mo = document.getElementById(dateElement.id + '_m').value;
d = document.getElementById(dateElement.id + '_d').value;
h = document.getElementById(dateElement.id + '_h').value;
mi = document.getElementById(dateElement.id + '_min').value;
s = 0;

return ValidateDate(y, mo, d, h, mi, s);

}

function CheckBlankDate(dateElement) {
var y, mo, d, h, mi, s;

y = document.getElementById(dateElement.id + '_y').value;
mo = document.getElementById(dateElement.id + '_m').value;
d = document.getElementById(dateElement.id + '_d').value;
h = document.getElementById(dateElement.id + '_h').value;
mi = document.getElementById(dateElement.id + '_min').value;
s = 0;

if(y=="" || mo =="" || d=="")
{
return false;
}
return true;

}

This approach does not work, as I believe JQuery cannot find any input
element with name "datecheck". Is there any other approach that we can
follow?

--
View this message in context: http://old.nabble.com/JQuery-validation-plugin---custom-validation-for-group-of-html-elements-tp26421224s27240p26421224.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.