我正在使用bootstrap验证器来验证表单，但我无法让它验证由datepicker填充的文本框。当我在文本框中单击时，datepicker显示日历。我选择一个日期，文本框中填充了所选日期（日历不会自动关闭，这是另一个问题，即使我修改了bootstrap-datepicker.js以使autoclose默认为yes）但验证器似乎忽略了框。它永远不会变成红色或绿色，永远不会得到支票或x。有什么建议吗？
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="test_file_upload.aspx.vb" Inherits="ARDirectWithMobile.test_file_upload" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title id="titleTag"><%: Page.Title %> 401(k) Account</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<link runat="server" id="StyleLink1" rel="stylesheet" type="text/css" href="/Content/bootstrap.css" />
<link rel="stylesheet" href="Content/bootstrapValidator.min.css"/>
<link rel="stylesheet" href="Content/bootstrap-datepicker.min.css"/>
<script type="text/javascript" src="Scripts/bootstrapValidator.min.js"> </script>
<script type="text/javascript" src="Scripts/bootstrap-datepicker.min.js"> </script>
</head>
<body>
<form id="contactForm" runat="server" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label">File Name</label>
<div class="col-md-6 bs-example">
<input type="file" class="form-control" name="uploadfile" />
<asp:Label ID="Label3" runat="server" Text="Navigate to the file you wish to upload" CssClass="label_under_text"></asp:Label>
</div>
</div>
<div class="date-form">
<label class="col-md-3 control-label">Pay Date</label>
<div class="col-md-6 bs-example">
<div class="input-group">
<label for="PayDate" class="input-group-addon btn"><span class="glyphicon glyphicon-calendar"></span></label>
<input id="PayDate" type="text" class="form-control date-picker" />
</div>
</div>
</div>
<br /><br />
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
<script>
$(".date-picker").datepicker();
</script>
<script>
$(document).ready(function () {
$('#contactForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
uploadfile: {
validators: {
notEmpty: {
message: 'You must select a valid payroll file to upload'
},
file: {
extension: 'txt,xls,csv',
type: 'text/plain,application/vnd.ms-excel,text/csv'
}
}
},
PayDate: {
validators: {
notEmpty: {
message: 'The Pay Date is required and cannot be empty'
},
stringLength: {
max: 10,
minlength: 10,
message: 'The Pay Date must be 10 characters long'
}
}
}
}
});
});
</script>
</body>
</html>
答案 0 :(得分：2)
仅对id属性的输入name进行验证，并且datepicker输入不具有name属性（或者您可能忘记了它）
<input id="PayDate" name="PayDate" type="text" class="form-control date-picker" />
并且您不需要检查日期的长度，不需要下面的代码
stringLength: {
max: 10,
minlength: 10,
message: 'The Pay Date must be 10 characters long'
}
并且您正在使用bootstrapdate picker来验证日期，并在需要更改时重新验证日期changeDate事件
$('.date-picker').on('changeDate show', function(e) {
$('#contactForm').bootstrapValidator('revalidateField', 'PayDate');
});
所以最终的代码将是
$(document).ready(function() {
$(".date-picker").datepicker();
$('#contactForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
uploadfile: {
validators: {
notEmpty: {
message: 'You must select a valid payroll file to upload'
},
file: {
extension: 'txt,xls,csv',
type: 'text/plain,application/vnd.ms-excel,text/csv'
}
}
},
PayDate: {
validators: {
notEmpty: {
message: 'The Pay Date is required and cannot be empty'
},
date: {
format: 'MM/DD/YYYY',
message: 'The format is MM/DD/YYYY'
}
}
}
}
});
$('.date-picker').on('changeDate show', function(e) {
$('#contactForm').bootstrapValidator('revalidateField', 'PayDate');
});
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
<form id="contactForm" runat="server" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label">File Name</label>
<div class="col-md-6 bs-example">
<input type="file" class="form-control" name="uploadfile" />
<asp:Label ID="Label3" runat="server" Text="Navigate to the file you wish to upload" CssClass="label_under_text"></asp:Label>
</div>
</div>
<div class="date-form">
<label class="col-md-3 control-label">Pay Date</label>
<div class="col-md-6 bs-example">
<div class="input-group">
<label for="PayDate" class="input-group-addon btn">
<span class="glyphicon glyphicon-calendar"></span></label>
<input type="text" id="PayDate" name="PayDate" class="form-control date-picker" />
</div>
</div>
</div>
<br />
<br />
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
答案 1 :(得分：-1)
$('#expiry_date').datepicker({
dateFormat: 'yy-mm-dd',
}).on('change', function(e) {
// Revalidate the date field
$('#frmForm').bootstrapValidator('revalidateField', 'expiry_date');
});