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?