jQuery jQuery UI Date Picker Validation

[j4v3d]

Hi,

I am trying to validate the date fields so when you if you select a date in the future and in the second input box you select today's date it should not let you submit the form.

I have it working so you cant select yesterday's date - its the date comparison that i cant seem to get working.

The scripts at the top i've removed half the file path for security reasons, don't want you guys to get confused.

/js/jquery-ui-1.8.6.custom.min.js"/>
/js/jquery.validate.js" />
/js/jquery.ui.datepicker.validation.js" />

<asp:TextBox ID="txtStartDate" runat="server" CssClass="DatepickerInput validBeforeDatepicker" />
<asp:TextBox ID="txtEndDate" runat="server" CssClass="DatepickerInput validAfterDatepicker" />

<script type="text/javascript">
$(function () {
    $("#tabs").tabs();
});

 $('.validBeforeDatepicker,.validAfterDatepicker').datepicker();


$(function () {
    $(".DatepickerInput").datepicker({
        showOn: "button",
        buttonImage: "/assets/img/calendar.gif",
        buttonImageOnly: true,
        minDate: 0,
        required: true,
        message: "This is a required field",
        dateFormat: 'dd-mm-yy'
    });
});

$(function () {
    $("#validAfterDatepicker").datepicker({
        showOn: "button",
        buttonImage: "/assets/img/calendar.gif",
        buttonImageOnly: true,
        minDate: +1,
        required: true,
        message: "This is a required field",
        dateFormat: 'dd-mm-yy'            
    });
});

I'm following this example but I'm going wrong somewhere and cant seem to quite put my finger on what it could be. http://keith-wood.name/uiDatepickerValidation.html

Website: http://bit.ly/WdZf10

Please dont submit form as it will just be spam if testing the form on the website. You can see its not validating even before submitting the form

[AndrewGSW]

I haven't looked in any detail but I believe you need to supply the before after combination using ids - from the linked page:

$('#validBeforeDatepicker,#validAfterDatepicker').datepicker();

This uniquely identifies the two (related) fields. Class-names would not work as there may be several fields with the same class.

But, viewing the source for that page, maybe it requires the validation code as well:

$('#validateForm').validate({
	errorPlacement: $.datepicker.errorPlacement,
	rules: {
		validDefaultDatepicker: {
			required: true,
			dpDate: true
		},
		validBeforeDatepicker: {
			dpCompareDate: ['before', '#validAfterDatepicker']
		},
		validAfterDatepicker: {
			dpCompareDate: {after: '#validBeforeDatepicker'}
		},
		validTodayDatepicker: {
			dpCompareDate: 'ne today'
		},
		validSpecificDatepicker: {
			dpCompareDate: 'notBefore 01/01/2012'
		}
	},
	messages: {
		validFormatDatepicker: 'Please enter a valid date (yyyy-mm-dd)',
		validRangeDatepicker: 'Please enter a valid date range',
		validMultiDatepicker: 'Please enter at most three valid dates',
		validAfterDatepicker: 'Please enter a date after the previous value'
	}});

Added: It appears this validation for (message placement) is optional, so perhaps it's just the use of ids vs. class-names that is the issue.

[xelawho]

Have a look at the code posted in this thread:
http://www.codingforums.com/showthread.php?t=285082

basically, the idea is that when the first date is selected the minDate for the second date is set via options.

No need for validation or blocking the form submission - the user just can't pick a date that doesn't make sense.

For extra security, you can make those inputs read-only. The date picker will still work on them, but you won't be able to type values in from the keyboard

oh, yes - and as Andrew points out, the datepicker will only work using the IDs of the inputs - class names are very problematic

[j4v3d]

Originally Posted by xelawho

Have a look at the code posted in this thread:
http://www.codingforums.com/showthread.php?t=285082

basically, the idea is that when the first date is selected the minDate for the second date is set via options.

No need for validation or blocking the form submission - the user just can't pick a date that doesn't make sense.

For extra security, you can make those inputs read-only. The date picker will still work on them, but you won't be able to type values in from the keyboard

oh, yes - and as Andrew points out, the datepicker will only work using the IDs of the inputs - class names are very problematic

Thank your for taking out the time and replying to my thread I shall get cracking on this in the morning and I shall keep you updated of how I am getting on - got a feeling I may need a little help on this. I'll update the thread tomorrow stay tuned

[j4v3d]

Originally Posted by AndrewGSW

I haven't looked in any detail but I believe you need to supply the before after combination using ids - from the linked page:

$('#validBeforeDatepicker,#validAfterDatepicker').datepicker();

This uniquely identifies the two (related) fields. Class-names would not work as there may be several fields with the same class.

But, viewing the source for that page, maybe it requires the validation code as well:

$('#validateForm').validate({
	errorPlacement: $.datepicker.errorPlacement,
	rules: {
		validDefaultDatepicker: {
			required: true,
			dpDate: true
		},
		validBeforeDatepicker: {
			dpCompareDate: ['before', '#validAfterDatepicker']
		},
		validAfterDatepicker: {
			dpCompareDate: {after: '#validBeforeDatepicker'}
		},
		validTodayDatepicker: {
			dpCompareDate: 'ne today'
		},
		validSpecificDatepicker: {
			dpCompareDate: 'notBefore 01/01/2012'
		}
	},
	messages: {
		validFormatDatepicker: 'Please enter a valid date (yyyy-mm-dd)',
		validRangeDatepicker: 'Please enter a valid date range',
		validMultiDatepicker: 'Please enter at most three valid dates',
		validAfterDatepicker: 'Please enter a date after the previous value'
	}});

Added: It appears this validation for (message placement) is optional, so perhaps it's just the use of ids vs. class-names that is the issue.

Posting from iPhone so having problems replying to comments left at once - I think that is my problem there I'm using classes more than ID's - the ASP controls renders the ID differently maybe that is another issue that Im having so may need to use normal input type HTML controls

[j4v3d]

I decided to go with this solution instead of faffing around. Much more simpler and more direct.

http://www.codingforums.com/showthread.php?t=285082

Thanks for the guidance/advice/help.

Much Appreciated