2017-05-02 6 views
0

私は日付選択ツールが含まれているフォームを持っており、ユーザーに必須のフィールドにする必要があります。フォームの検証がありますが、送信ボタンをクリックするたびに日付を記入する必要があります。私は何か不足していますか?ここでdatepickerのテキストボックスを検証する方法は?

は私のコードです:

HTML:

<form class="form-horizontal" id="contactForm" action="PostFoundItem" method="POST" enctype="multipart/form-data"> 
    <div class="form-group"> 
     <label for="dateFound" class="col-sm-3 control-label">Date Found:</label> 
     <div class="col-sm-9"> 
      <div class="input-group"> 
       <div class="input-group-addon"> 
        <i class="fa fa-calendar"> 
        </i> 
       </div> 
       <input class="form-control hasDatepicker" id="fi" name="dateFound" placeholder="YYYY/MM/DD" type="text"/> 
      </div> 
     </div> 
    </div> 
</form> 

JS:

<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" /> 
<link rel="stylesheet" href="https://formden.com/static/cdn/font-awesome/4.4.0/css/font-awesome.min.css" /> 

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css"/> 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script> 

<script> 
    $(document).ready(function() { 
    var date_input = $('input[name="dateFound"]'); //our date input has the name "date" 
    var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body"; 
    var FromEndDate = new Date(); 
    date_input.datepicker({ 
     format: 'yyyy/mm/dd', 
     container: container, 
     endDate: '+0d', 
     todayHighlight: true, 
     autoclose: true, 
     required: true, 

    }) 
}) 
    $(document).ready(function() { 
     $('#contactForm').bootstrapValidator({ 
      container: '#message', 
      fields: { 
       dateFound: { 
        validators: { 
         notEmpty: { 
          message: 'The `Date Found` field is required and cannot be empty' 
         } 

        } 
       } 
      } 
     }); 
    }); 
</script> 

答えて

0

jQueryとBootstrap JavaScriptがありません。コードにこれを追加してください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
関連する問題