I have these:
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.
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">×</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
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">×</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>