0

私はこれらを持っています：

  • ブートストラップモーダル
  • モーダル内は単純なフォームです
  • 唯一の入力は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 サイトの例に非常に近いものです。私が呼んでいるように、日付ピッカーに日付を設定することは可能ですか? さまざまなことを試しましたが、何らかのエラーがあるか、単に設定されていません。

4

1 に答える 1

0

はい、日付フィールドが空で必須の場合、送信時に日付入力フィールドが無効とマークされ、カレンダー ポップアップが表示されます。これは通常の動作です。

formValidationプラグイン サイトの例を次に示します。

ソリューション 1

したがって、日付ピッカーカレンダーを表示したくない場合は、デフォルトの日付を設定するか、requiredDatePicker フィールドから条件を削除できます。

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

SideNote: DateField を必須にする場合は、datepicker から新しい日付を選択するときにフィールドを再検証する必要もあります

プラグインの互換性について詳しくは、こちらをご覧ください。

代替ソリューション

  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 に答える