jQuery Date Picker Validation Problems

datepicker, jquery, jquery-ui, validation

Solution

You could try these two validation libraries for validating the jQuery UI Datepicker.

Working Example for H5F

CSS:

.valid {
  background: green;
  color: #fff;
}
.error {
  background: red;
  color: #fff;
}
​

HTML:

<form id="h5ftest">
    <input type="date" required pattern="\d{2}\/\d{2}\/\d{4}">
</form>​

jQuery:

$(function() {
  H5F.setup( $( "#h5ftest" ) );

  $( "[type=date]" ).datepicker({
    onClose: function() {
      $( this ).focus().blur();
    }
  });
});​

or Working Example for jQuery Validate plugin

CSS:

.valid {
  background: green;
  color: #fff;
}
.error {
  background: red;
  color: #fff;
}​
​

HTML:

<form id="jQueryValidateTest">
    <input type="date" required>
</form>​

jQuery:

$(function() {

  $( "#jQueryValidateTest" ).validate();

  $( "[type=date]" ).datepicker({
    onClose: function() {
      $( this ).valid();
    }
  });
});​

Problem

I am trying to validate the two input boxes where the user selects a date - i've managed to get far as restricting the user to select a previous date and if they select the first textbox as today's date the next input box must be one day ahead (future date) On submit i am trying to get it to validate so if you dont select one of the input boxes it gives you an error message. ``` <asp:Label ID="lblPickupDate" runat="server" Text="Pick-up Date" CssClass="lblPickup"></asp:Label> <input type="text" class="datePicker" id="validBeforeDatepicker" value="Please select a date" name="pickupdate" /> <span class="ui-icon ui-icon-calendar"></span> <asp:Label ID="lblReturnDate" runat="server" Text="Return Date" CssClass="lblReturnDate"></asp:Label> <input type="text" class="datePicker" id="validAfterDatepicker" value="Please select a date" name="returdate" /> <span class="ui-icon ui-icon-calendar"></span> $(function () { $("#validBeforeDatepicker").datepicker({ showOn: "button", buttonImage: "/assets/img/calendar.gif", buttonImageOnly: true, minDate: 0, required: true, message: "This is a required field", dateFormat: 'dd-mm-yy', onClose: function() {$(this).valid();} }); }); $(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', onClose: function() {$(this).valid();} }); }); ``` Ive set required to true so shouldn't it throw a validation error if you miss it? The site where the form is: http://www.rentruck.co.uk I've also had a look at this but cant seem to replicate it http://keith-wood.name/uiDatepickerValidation.html

Original source