FormValidation + Datepicker inside Bootstrap modal

Question

I have these:

• Bootstrap Modal
• inside the modal is a simple form
• the only input is jQuery UI Datepicker
• form is validated by FormValidation(.io)

Everything works just fine, except, for some reason when i don't select any date and the formvalidation is triggered (invalid state), the Datepicker popup is triggered.

Is this normal behaviour and what is the way to prevent it?

UPDATED

My validation and datepicker look something like this:

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

This is much closer to examples on formvalidation site. Is it possible to set a date on a datepicker like i am calling it? I've tried many different things, but either i have some kind of error or it simply doesn't set it.

Answer 1

Yes, if the date field will be empty and required, then on submit the Date input field marked invalid and the calendar popup will show and it's a normal behaviour.

Here is an example on formValidation plugin site

Solution One

So either you can set a default date, if you don't want the Date Picker calendar to show Or remove the required condition from DatePicker field.

$(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: If you want DateField to be required then you also need to Revalidate the field when selecting new date from the datepicker

Read More about plugins compatibility.

---

Alternate Solution

1. If the date input field must be required
2. No date selected and field must not be validated on form submission
3. If Date selected, must validate the Date in Correct Format

Following Conditional Validation can do the trick

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