I been looking at this for far too long here. I'm trying to use two sets of validation on 2 fields (both dates, validation happens onblur, the default event for the validation engine).
The first set of validation happens all the time and verifies that the user has valid input dates.
The second set of validation happens only when both fields have correct dates. it preforms a check to verify both sets of dates have a valid date range to search for.
But its the second that I am currently having a problem with atm. My FuncCalls aren't being recognized for some reason. I've looked at the documentation and the source but I am still not sure what exactly is the proper way of doing this or, for that matter ,in terms of dealing with interdependent fields, if there is a better way of handling this.
<html>
<head>
<script src="../../inc/functions.js" type="text/javascript"></script>
<script src="../../inc/jquery-min.js" type="text/javascript"></script>
<script src="../../inc/jquery.validationEngine.js" type="text/javascript"></script>
<script src="../../inc/jquery.validationEngine-en.js" type="text/javascript"></script>
<link href="../../inc/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//returns true if end is later than start
function dateCompare(start, end) {
if (isDate(start) && isDate(end)) {
return (new Date(start.toString()) < new Date(end.toString()))
}
}
$(document).ready(function () {
$("#arbitraryForm").validationEngine('attach');
function rangeCheck(field, rules, i, options) {
alert("rangeCheck caLLEd");
var inDate1 = $("#inDate1").val();
var inDate2 = $("#inDate2").val();
if (!dateCompare(inDate1, inDate2)) {
return "arbitarty error";
}
}
$("#inDate1").blur(function (e) {
var inDate1 = PadDate($("#inDate1").val());
var inDate2 = PadDate($("#inDate2").val());
if (isDate(inDate1)) {
document.getElementById("inDate1").value = inDate1;
if (isDate(inDate2)) {
if (dateCompare(inDate1, inDate2)) {
}
}
}
}),
$("#inDate2").blur(function (e) {
var inDate2 = PadDate($("#inDate2").val());
if (isDate(inDate2)) {
document.getElementById("inDate2").value = inDate2;
}
})
});
</script>
</head>
<form id="arbitraryForm" action="whatever_page.html">
<div>
<input type="text" id="inDate1" name="inDate1" value="" class="validate[required,custom[dateFormat],funcCall[rangeCheck]]" />
<input type="text" id="inDate2" name="inDate1" value="" class="validate[required,custom[dateFormat],funcCall[rangeCheck]]" />
</div>
<input id="subbtn" type="submit" value="Run Report" name="subbtn"/>
</form>
</html>
I think you are adding complexity you don't really need (this seems to happen a lot with jQuery). Why not just use something like:
function rangeCheck() {
alert("rangeCheck caLLEd");
var inDate1 = $("#inDate1").val();
var inDate2 = $("#inDate2").val();
if (!dateCompare(inDate1, inDate2)) {
//flag the error in the form here, if you want
return false;
}
return true;
}
function blur1() {
var inDate1 = PadDate($("#inDate1").val());
var inDate2 = PadDate($("#inDate2").val());
if (isDate(inDate1)) {
document.getElementById("inDate1").value = inDate1;
if (isDate(inDate2)) {
if (dateCompare(inDate1, inDate2)) {
}
}
}
}
function blur2() {
var inDate2 = PadDate($("#inDate2").val());
if (isDate(inDate2)) {
document.getElementById("inDate2").value = inDate2;
}
}
<form id="arbitraryForm" action="whatever_page.html" onSubmit="return rangeCheck();">
<div>
<input type="text" id="inDate1" name="inDate1" value="" onBlur="blur1();" />
<input type="text" id="inDate2" name="inDate1" value="" onBlur="blur2();" />
</div>
<input id="subbtn" type="submit" value="Run Report" name="subbtn"/>
</form>
...it's shorter, and more clear in what it is doing.
Also, there's no need to define your named function (rangeCheck() in this case) inside of the document.ready block. You can if you want, but if you do so you may want to explicitly assign it into the global scope, like so:
window.rangeCheck = function(field, rules, i, options) {
alert("rangeCheck caLLEd");
var inDate1 = $("#inDate1").val();
var inDate2 = $("#inDate2").val();
if (!dateCompare(inDate1, inDate2)) {
return "arbitarty error";
}
};