Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2009
    Location
    UK
    Posts
    34
    Thanks
    6
    Thanked 0 Times in 0 Posts

    jQuery UI Date Picker Validation

    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.

    Code:
    /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

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I haven't looked in any detail but I believe you need to supply the before after combination using ids - from the linked page:

    Code:
    $('#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:

    Code:
    $('#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.
    Last edited by AndrewGSW; 01-02-2013 at 06:59 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    j4v3d (01-03-2013)

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,930
    Thanks
    56
    Thanked 552 Times in 549 Posts
    Have a look at the code posted in this thread:
    Date Picker and difference

    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

  • Users who have thanked xelawho for this post:

    j4v3d (01-03-2013)

  • #4
    New Coder
    Join Date
    Mar 2009
    Location
    UK
    Posts
    34
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    Have a look at the code posted in this thread:
    Date Picker and difference

    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

  • #5
    New Coder
    Join Date
    Mar 2009
    Location
    UK
    Posts
    34
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by AndrewGSW View Post
    I haven't looked in any detail but I believe you need to supply the before after combination using ids - from the linked page:

    Code:
    $('#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:

    Code:
    $('#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

  • #6
    New Coder
    Join Date
    Mar 2009
    Location
    UK
    Posts
    34
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I decided to go with this solution instead of faffing around. Much more simpler and more direct.

    Date Picker and difference

    Thanks for the guidance/advice/help.

    Much Appreciated
    Last edited by j4v3d; 01-03-2013 at 12:47 PM. Reason: solution found


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •