出生日期,加入日期和离开日期的有效日期
我有三个文本框BirthDate
,JoiningDate
& LeavingDate
。出生日期,加入日期和离开日期的有效日期
现在我想的是: -
Joining date
和Leaving date
应不大于Birthdate
Leaving Date
应不大于Joining Date
和BirthDate
我有使用DatePicker。
这里是JS代码: -
$(function() {
$("[id$=mainContent_txtdateofbirth], [id$=mainContent_txtdoj], [id$=mainContent_txtdol]").datepicker({
textboxImageOnly: true,
textboxImage: 'images/calendar.png',
changeMonth: true,
changeYear: true,
dateFormat: "yy/mm/dd",
yearRange: "-40:+0",
maxDate: new Date(),
});
});
的三个文本框是: -
<asp:TextBox ID="txtdateofbirth" CssClass="form-control" runat="server" ValidationGroup="AddNew"></asp:TextBox>
<asp:TextBox ID="txtdoj" CssClass="form-control" runat="server" ValidationGroup="AddNew"></asp:TextBox>
<asp:TextBox ID="txtdol" CssClass="form-control" runat="server" ValidationGroup="AddNew"></asp:TextBox>
修订ASPX CODE: -
<tr>
<td style="vertical-align: top;">
<label class="control-label" for="dob">Date of Birth</label></td>
<td>
<div class="control-group">
<div class="controls">
<asp:TextBox ID="txtdateofbirth" CssClass="form-control" autocomplete="off" runat="server" ValidationGroup="AddNew"></asp:TextBox>
<asp:RequiredFieldValidator ID="reqdob" runat="server" CssClass="error-class" ControlToValidate="txtdateofbirth" ErrorMessage="Please select the date of birth" ValidationGroup="AddNew"></asp:RequiredFieldValidator>
</div>
</div>
</td>
</tr>
<tr>
<td style="vertical-align: top;">
<label class="control-label" for="subject">Date of Join</label></td>
<td>
<div class="control-group">
<div class="controls">
<asp:TextBox ID="txtdoj" Wrap="true" CssClass="form-control" autocomplete="off" runat="server" ValidationGroup="AddNew"></asp:TextBox>
<asp:RequiredFieldValidator ID="reqdoj" CssClass="error-class" runat="server" ControlToValidate="txtdoj" ErrorMessage="Please add the date of joining" ValidationGroup="AddNew"></asp:RequiredFieldValidator>
</div>
</div>
</td>
</tr>
<tr>
<td style="vertical-align: top;">
<label class="control-label" for="subject">Date of Leaving</label></td>
<td>
<div class="control-group">
<div class="controls">
<asp:TextBox ID="txtdol" CssClass="form-control" autocomplete="off" runat="server" ValidationGroup="AddNew"></asp:TextBox>
</div>
</div>
</td>
</tr>
验证功能
这将如果表单有效或假返回truevar validateData = function() {
var bday = $('#birthdate').val();
var jday = $('#joiningdate').val();
var lday = $('#leavingdate').val();
if (bday && jday && bday > jday) {return}
if (bday && lday && bday > lday) {return}
if (jday && lday && jday > lday) {return}
return true;
};
被称为onClose事件datepicker,之后可以显示错误消息。随意更改错误显示方法。
onClose: function() {
validateData() ? $('#errormsg').hide() : $('#errormsg').show();
}
更新
要添加一些CSS错误消息添加类像
<div id="errormsg" class="error-msg">Invalid date</div>
然后你可以移动display: none;
到你的CSS
更新
Demo为必填项
我真的不明白如何你希望你的代码看起来。不管怎么说,这是一个简单的验证,你可以把一个功能,如果你想:
function validateMyForm() {
return ($('#txtdoj').val() <= $('#txtdateofbirth').val()
&& $('#txtdol').val() <= $('#txtdateofbirth').val()
&& $('#txtdol').val() <= $('#txtdoj').val()
&& $('#txtdol').val() <= $('#txtdateofbirth').val());
}
,如果它不是
我想要显示简单的错误消息,如果用户输入错误的数据 – BNN 2015-04-06 05:45:36
完成JS小提琴是here
首先亮相让我假定你实际上意味着以下
- 加入日期不应小于生日
- 离开日期不应该是小于加入日期和出生日期
而不是其他方式,请纠正我,如果我错了。
现在要寻求解决方案,您可以通过使用jQuery验证插件来实现此目的。只需将自定义验证功能添加到插件并根据它验证表单。请参阅示例代码
<form id="myForm">
<p>Date Of Birth:
<input type="text" name="datepicker_dob" id="datepicker_dob" />
</p>
<p>Date Of Joining:
<input type="text" name="datepicker_doj" id="datepicker_doj" />
</p>
<p>Date Of Leaving:
<input type="text" name="datepicker_dol" id="datepicker_dol" />
</p>
<button type="button" id="saveButton">Save</button>
</form>
初始化这样
$(document).ready(function() {
$("[id$=datepicker_dob],[id$=datepicker_doj],[id$=datepicker_dol]").datepicker({
// add this option when you initialise the datetime picker, this will
// validate date based on our custom validation rule when we select a date
onSelect:function(){
$(this).valid();
}
});
});
接下来的日期时间选取器添加自定义的验证功能
$.validator.addMethod("dateValidatorLE", function(value, element, params) {
var isDateValid = true;
$(params).each(function(i) {
// alert($(params[i]).val());
isDateValid &= (Date.parse(value) > Date.parse($(params[i]).val()))
});
return this.optional(element) || isDateValid;
}, $.validator.format('general error message'));
的验证形式
$('#myForm').validate({
rules: {
datepicker_doj: {
dateValidatorLE: ['#datepicker_dob']
},
datepicker_dol: {
dateValidatorLE: ['#datepicker_dob', '#datepicker_doj']
}
},
messages: {
datepicker_doj: {
dateValidatorLE: 'DOJ must be greater than DOB'
},
datepicker_dol: {
dateValidatorLE: 'DOL must be greater that DOJ and DOB'
}
},
onkeyup: function(e) {
this.element(e);
}
});
让我知道这是否对你有帮助。
是的,它会更有帮助,如果它将在asp.net。正如Tien已经在HTML中那样做了。如果你需要其他东西,请告诉我 – BNN 2015-04-06 11:46:37
如果用户尝试输入无效日期,您希望用户体验如何? – 2015-04-03 14:53:44
@EricHughes:他们应该将消息看作“无效日期” – BNN 2015-04-03 14:54:34
您想在哪里放置错误消息。在datepickers的输入字段?或者没关系? – 2015-04-06 08:28:02