0

我有这些：

  • 引导模式
  • modal里面是一个简单的form
  • 唯一的输入是 jQuery UI Datepicker
  • 表单由 FormValidation(.io) 验证

一切正常，除了由于某种原因我没有选择任何日期并且触发了表单验证（无效状态）时，触发了 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');
  }
});

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

4

1 回答 1

0

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

这是formValidation插件站点上的示例

解决方案一

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

$(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'
          }
        }
      }
    }
  });
});
<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>

旁注：如果您希望 DateField 是必需的，那么您还需要在从日期选择器中选择新日期时重新​​验证该字段

阅读有关插件兼容性的更多信息。

替代解决方案

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

遵循条件验证可以解决问题

$(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')
    }
  });
});
<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>

于 2016-01-27T20:22:34.687 回答