Bootstrap 带日期选择器的验证器不验证日期

Question

我正在使用 bootstrap 验证器来验证表单，但我无法使用它来验证由日期选择器填充的文本框。当我单击文本框时，日期选择器会显示一个日历。我 select 一个日期，文本框会填充 selected 日期（日历不会自动关闭，这是另一个问题，即使我修改了 bootstrap-datepicker.js 自动关闭默认为是）但验证器似乎忽略了该框。它永远不会变成红色或绿色，也永远不会得到支票或 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>

Answer 1

验证不适用于仅具有 name 属性的输入 id，并且日期选择器输入没有 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>

Fiddle

Answer 2

  $('#expiry_date').datepicker({
        dateFormat: 'yy-mm-dd',
    }).on('change', function(e) {
        // Revalidate the date field
        $('#frmForm').bootstrapValidator('revalidateField', 'expiry_date');
    });

Bootstrap 带日期选择器的验证器不验证日期

Bootstrap Validator with datepicker does not validate date

twitter-bootstrap

validation

datepicker

bootstrapvalidator