Question

    **My HTML form is:**

<html>
  <body>

    <form role="form" class="margin_top" method="post" id="eventForm">

            <div class="form-group">
                    <div class="input-group date form_date col-sm-12" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" id="datePicker">
                        <input class="form-control" size="16" type="text" value="" name="date_from" placeholder="Date of Arrival" readonly>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                </div>
             <div class="form-group">
                    <div class="input-group date form_date col-sm-12" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" id="datePicker2">
                        <input class="form-control" size="16" type="text" value="" name="date_to" placeholder="Date of Departure" readonly>

                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                    <input type="hidden" id="dtp_input2" value="" />
                </div>
      <button type="submit" name="send_request" class="btn btn-info bnt-md" value="send">Send Request</button>
    </form>
  </body>


   <script> 
    $(document).ready(function() {
        $('#datePicker')
            .datepicker({
                format: 'mm/dd/yyyy'
            })
            .on('changeDate', function(e) {
                // Revalidate the date field
                $('#eventForm').formValidation('revalidateField', 'date_from');
        });
        $('#datePicker2')
            .datepicker({
                format: 'mm/dd/yyyy'
            })
            .on('changeDate', function(e) {
                // Revalidate the date field
                $('#eventForm').formValidation('revalidateField', 'date_to');
        });



        $('#eventForm').bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                date_from: {
                        validators: {
                            notEmpty: {
                            message: 'The date is required'
                        },
                        date: {
                            format: 'MM/DD/YYYY',
                            message: 'The date is not a valid'
                        }
                        }
                    },
                date_to: {
                        validators: {
                            notEmpty: {
                            message: 'The date is required'
                        },
                        date: {
                            format: 'MM/DD/YYYY',
                            message: 'The date is not a valid'
                        }
                        }
                    }
            }
        });
    });
    </script>

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.4.5/css/bootstrapValidator.min.css"  charset="UTF-8">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.4.5/js/bootstrapValidator.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
</html>

当我没有从Datepicker中选择任何日期并且我提交表单然后它显示错误消息＆＃34;日期是要求＆＃34;，所以再次从Datepicker中选择日期然后它显示相同的错误消息。它无法重新验证。我该如何解决这个问题？

Answer 1

嗨，请尝试这个脚本可能会有帮助。

$(document).ready(function() {
        $('#datePicker')
            .datepicker({
                format: 'mm/dd/yyyy'
            })
            .on('changeDate', function(e) {
                // Revalidate the date field
                $('#eventForm').formValidation('revalidateField', 'date_from');
        });
        $('#datePicker2')
            .datepicker({
                format: 'mm/dd/yyyy'
            })
            .on('changeDate', function(e) {				
				if(new Date( $('#date1').val()) >= new Date($('#date2').val()))
				{
					alert('Set date proper !');
					jQuery('#date2').val('');
				}
				
                // Revalidate the date field
                //$('#eventForm').formValidation('revalidateField', 'date_to');
        });
		
		(function( $ ){
		 $.fn.formValidation = function(t1,t2) {
		     // alert(t2);
	      return this;
		}; 
		})( jQuery );


        $('#eventForm').bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                date1: {
                        validators: {
                            notEmpty: {
                            message: 'The date is required'
                        },
                        date: {
                            format: 'MM/DD/YYYY',
                            message: 'The date is not a valid'
                        }
                        }
                    },
                date12: {
                        validators: {
                            notEmpty: {
                            message: 'The date is required'
                        },
                        date: {
                            format: 'MM/DD/YYYY',
                            message: 'The date is not a valid'
                        }
                        }
                    }
            }
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.4.5/css/bootstrapValidator.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.4.5/js/bootstrapValidator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>

    <form role="form" class="margin_top" method="post" id="eventForm">

            <div class="form-group">
                    <div class="input-group date form_date col-sm-12" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" id="datePicker">
                        <input class="form-control" size="16" type="text" value="" name="date_from" id="date1" placeholder="Date of Arrival" readonly>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                </div>
             <div class="form-group">
                    <div class="input-group date form_date col-sm-12" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" id="datePicker2">
                        <input class="form-control" size="16" type="text" value="" name="date_to" placeholder="Date of Departure" id="date2" readonly>

                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                    <input type="hidden" id="dtp_input2" value="" />
                </div>
      <button type="submit" name="send_request" class="btn btn-info bnt-md" value="send">Send Request</button>
    </form>

如果有任何问题，请告诉我。因为我不确定你需要什么。

为什么Bootstrap Datepicker不会重新验证

1 个答案: