FormValidation + Bootstrap modal 中的日期选择器

我有这些：

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

一切正常，除了由于某种原因，当我不选择任何日期并且表单验证被触发（无效状态）时，会触发日期选择器弹出窗口。

这是正常行为吗，有什么方法可以防止它？

更新

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

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

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

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

这是表单验证插件站点上的一个示例

解决方案一

因此，如果您不希望日期选取器

日历显示，则可以设置默认日期，或者从日期选取器字段中删除required条件。

$(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>

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

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

替代解决方案

如果必须输入日期字段
未选择日期，并且不得在提交表单时验证字段
如果选择了"日期"，则必须以正确的格式验证日期

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

$(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>

相关内容

最新更新

热门标签：