jQuery日期选择器验证问题

时间:2012-12-11 11:12:26

标签: jquery jquery-ui validation datepicker

我正在尝试验证用户选择日期的两个输入框 - 我设法远远限制用户选择之前的日期,如果他们选择第一个文本框作为今天的日期,下一个输入框必须提前一天(未来日期)

在提交时,我试图让它验证,所以如果你不选择其中一个输入框,它会给你一个错误信息。

<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();}
    });
});

我已将必需设置为true,因此如果您错过它,是否应该抛出验证错误?

表单所在的网站:http://www.rentruck.co.uk

我也看过这个,但似乎无法复制它http://keith-wood.name/uiDatepickerValidation.html

2 个答案:

答案 0 :(得分:5)

您可以为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();
    }
  });
});​

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();
    }
  });
});​

答案 1 :(得分:3)

View source部分的Datepicker site部分,他们建议您在onClose事件中手动检查日期范围:

$(function() {
    $( "#from" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
        onClose: function( selectedDate ) {
            $( "#to" ).datepicker( "option", "minDate", selectedDate );
        }
    });
    $( "#to" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
        onClose: function( selectedDate ) {
            $( "#from" ).datepicker( "option", "maxDate", selectedDate );
        }
    });
});