Bootstrap模式

Question

我有这些：

• Bootstrap Modal
模态内的
• 是一个简单的形式
• 唯一的输入是jQuery UI Datepicker
• 表单由FormValidation（.io）
验证

一切正常，但由于某些原因，当我没有选择任何日期并且触发了formvalidation（无效状态）时，会触发Datepicker弹出窗口。

这是正常行为吗？防止它的方法是什么？

已更新

我的验证和日期选择器看起来像这样：

$("#return-modal-form").formValidation({
 .
 .
 .
fields: {
  datetimePicker: {
    selector: '#return-date',
    err: '#return-date-live',
    validators: {
      notEmpty: {
        message: 'Required'
      }
    }
  }
}
})
  .find('#return-date').datepicker({
    onSelect: function(date, inst) {
    $('#return-modal-form').formValidation('revalidateField',   'datetimePicker');
  }
});

这更接近于formvalidation网站上的示例。 是否可以在日期选择器上设置日期，就像我在调用它一样？ 我尝试了很多不同的东西，但要么我有某种错误，要么根本就没有设置它。

Answer 1

是的，如果日期字段为空且需要，则在提交标记为无效的日期输入字段时，日历弹出窗口将显示，这是正常行为。

以下是formValidation插件网站

的示例

解决方案一

因此，您可以设置默认日期，如果您不希望显示日期选择器日历或从DatePicker字段中删除required条件。

＆＃13;

＆＃13;

$(document).ready(function() {

  $("#DateInput").datepicker();
  $("#DateInput").datepicker("setDate", new Date());
  
  $('#SampleForm').formValidation({
    framework: 'bootstrap',
    icon: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      DateInput: {
        validators: {
          notEmpty: {
            message: 'Date Is Required'
          }
        }
      }
    }
  });
});

＆＃13;

<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/formvalidation/0.6.1/css/formValidation.min.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/formValidation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="reserveModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal Header</h4>
      </div>
      <form id="SampleForm" name="SampleForm" class="horizontal">
        <div class="modal-body">
          <fieldset>
            <div class="form-group">
              <label for="DateInput" class="col-xs-6 control-label">Date</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" name="DateInput" id="DateInput" required>
              </div>
            </div>
          </fieldset>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-success">Submit</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </form>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

SideNote：如果您需要DateField，那么您还需要从datepicker中选择新日期时重新​​验证字段

Read More关于插件兼容性。

替代解决方案

1. 如果必须输入日期输入字段
2. 未选择日期且不得在表单提交上验证字段
3. 如果选择了日期，则必须验证格式正确的日期

遵循条件验证可以做到这一点

＆＃13;
＆＃13;
$(document).ready(function() {

  $("#DateInput").datepicker();

  $('#SampleForm').formValidation({
    framework: 'bootstrap',
    icon: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      DateInput: {
        enabled: false,
        validators: {
          notEmpty: {
            message: 'Date Is Required'
          },
          date: {
            format: 'MM/DD/YYYY',
            message: 'The date is not valid'
          }
        }
      }
    }
  }).on('change', '[name="DateInput"]', function() {
    var isEmpty = $(this).val() == '';
    $('#SampleForm')
      .formValidation('enableFieldValidators', 'DateInput', !isEmpty)
      // Revalidate the field if not blank
    if ($(this).val().length == 1) {
      $('#SampleForm').formValidation('validateField', 'DateInput')
    }
  });
});
＆＃13;
<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/formvalidation/0.6.1/css/formValidation.min.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/formValidation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="reserveModal" aria-hidden="true">
  <div class="modal-dialog">
	<div class="modal-content">
	  <div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		<h4 class="modal-title" id="myModalLabel">Modal Header</h4>
	  </div>
	  <form id="SampleForm" name="SampleForm" class="horizontal" method="Post">
		<div class="modal-body">
		  <fieldset>
			<div class="form-group">
			  <label for="DateInput" class="col-xs-6 control-label">Date</label>
			  <div class="col-sm-10">
				<input type="text" class="form-control" name="DateInput" id="DateInput" required>
			  </div>
			</div>
		  </fieldset>
		</div>
		<div class="modal-footer">
		  <button type="submit" class="btn btn-success">Submit</button>
		  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		</div>
	  </form>
	</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;