maqskywalker
asked on
jquery validation rule properties
Hi experts,
I have a html page where I'm using jQuery UI DatePicker and jQuery Validation plugin.
This is my working example.
So if you run that html page in browser you get something like this. The validation and date picker work just fine.:
I need to add one validation rule.
Right now, if type a date (instead of using the date picker) outside of the range of the Current Calendar Year.
The validation doesn't catch that as shown here:
If you look at my javascript code, I'm hard coding a variable called CalendarYear to be 2015.
So then my datepicker uses that variable to only allow a user to select dates that fall between january 1, 2015 and december 31, 2015.
In my validation I currently have a rule that doesn't let a user use the date picker pick a to date that is before a from date.
In my validation I also have both a start and end date as required.
One thing I noticed about my example is that although the date picker works good and doesnt let user select a date outside the current CalendarYear date range. I noticed a user doesn't have to use the date picker to enter a date.
I could actually just type/edit the date using the keyboard instead.
So thus. if I use a keyboard to type a date range outside of my calendar year the validation doesnt catch that.
Anyone know the syntax for a custom jquery validation rule that will display play a validation message when a user types a date outside the calendar year?
I saw this example, but that just confused me more.
https://gist.github.com/cbumgard/4742703
I have a html page where I'm using jQuery UI DatePicker and jQuery Validation plugin.
This is my working example.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>jQuery UI Date Picker with validation</title>
<!--EXTERNAL REFERENCES-->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//-------------------------
//******** on Page Load Events ********
// *** limit datepicker to only date range within fiscal year ***
var CalendarYear = 2015;
// save message to a variable
var message1 = "<p>The current Fiscal year is: " + CalendarYear + "</p>";
// show the variable on screen
$('.DisplayLabelYear').append(message1);
//******** on Page Load Events ********
//******** Add DateRange DatePicker ********
$("#StartDate").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
// set min date as January 1 of CalendarYear
minDate: new Date(Date.parse("January 1, " + CalendarYear)),
// set max date as December 31 of CalendarYear
maxDate: new Date(Date.parse("December 31, " + CalendarYear)),
onClose: function (selectedDate) {
$("#EndDate").datepicker("option", "minDate", selectedDate);
}
});
$("#EndDate").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
// set min date as January 1 of CalendarYear
minDate: new Date(Date.parse("January 1, " + CalendarYear)),
// set max date as December 31 of CalendarYear
maxDate: new Date(Date.parse("December 31, " + CalendarYear)),
onClose: function (selectedDate) {
$("#EndDate").datepicker("option", "maxDate", selectedDate);
}
});
//******** Add DateRange DatePicker ********
// ***************** add validation to daterange textboxes *****************
jQuery.validator.addMethod("isValid", function (value, element) {
var startDate = $('#StartDate').val();
var endDate = $('#EndDate').val();
return Date.parse(startDate) < Date.parse(endDate);
}, "* End date must be after start date");
//$('#StartDate,#EndDate').datepicker()
$('#Form1').validate({
rules: {
'StartDateV': { required: true, date: true },
'EndDateV': { required: true, date: true, isValid: true }
}, messages: {
'StartDateV': {
required: 'start date is required.',
date: 'invalid date format.'
},
'EndDateV': {
required: 'end date is required.',
date: 'invalid date format msj',
isValid: 'End date must be after start date'
}
}
});
// ***************** add validation to daterange textboxes *****************
//-------------------------
// end of document ready function
});
</script>
<style type="text/css">
/*********** validation text ***********/
label.error {
height: 17px;
margin-left: 10px;
/*padding: 5px 5px 5px 5px;*/
}
/* error message text style */
.error {
font-family: Arial;
font-size: 12px;
color: #ff0000;
}
/*********** validation text ***********/
</style>
</head>
<body>
<br /><br /><div class="DisplayLabelYear"></div>
<br /><br />
<form id="Form1" action="">
<br /><br /><br /><br />
<input type="text" id="StartDate" name="StartDateV" style="color: #4080BF; font: bold 12px verdana; padding: 0 2px 3px 2px;" />
<input type="text" id="EndDate" name="EndDateV" style="color: #4080BF; font: bold 12px verdana; padding: 0 2px 3px 2px;" />
<br />
<input type="submit" />
</form>
</body>
</html>So if you run that html page in browser you get something like this. The validation and date picker work just fine.:
I need to add one validation rule.
Right now, if type a date (instead of using the date picker) outside of the range of the Current Calendar Year.
The validation doesn't catch that as shown here:
If you look at my javascript code, I'm hard coding a variable called CalendarYear to be 2015.
So then my datepicker uses that variable to only allow a user to select dates that fall between january 1, 2015 and december 31, 2015.
In my validation I currently have a rule that doesn't let a user use the date picker pick a to date that is before a from date.
In my validation I also have both a start and end date as required.
One thing I noticed about my example is that although the date picker works good and doesnt let user select a date outside the current CalendarYear date range. I noticed a user doesn't have to use the date picker to enter a date.
I could actually just type/edit the date using the keyboard instead.
So thus. if I use a keyboard to type a date range outside of my calendar year the validation doesnt catch that.
Anyone know the syntax for a custom jquery validation rule that will display play a validation message when a user types a date outside the calendar year?
I saw this example, but that just confused me more.
https://gist.github.com/cbumgard/4742703
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.