Form validation is not a function - Bootstrap datepicker
Question
I'm tying to use a bootstrap date picker based on this example:
http://formvalidation.io/examples/bootstrap-datepicker/
This is my .html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<!-- ################ -->
<!-- ####Bootstrap### -->
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.min.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.4.5/js/bootstrapValidator.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.4.5/css/bootstrapValidator.min.css" rel="stylesheet"/>
<!-- ################ -->
<!-- #####Custom##### -->
<script src="Scripts/datepicker.js"></script>
<link rel="stylesheet" href="CSS/dashboard.css" />
<!-- ################ -->
</head>
<body>
<!-- Top bar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">NY Noise Map</a>
</div>
</div>
</nav>
<!-- Content -->
<div class="container-fluid">
<!-- Right Panel -->
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<!-- Start Date -->
<form id="startDate" method="post" class="dateRangeForm form-vertical">
<div class="form-group">
<label class="control-label">Start Date:</label>
<br></br>
<div class="date">
<div class="input-group input-append date dateRangePicker">
<input type="text" class="form-control" name="date" />
<span class="input-group-addon add-on">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</form>
<!-- End Date -->
<form id="endDate" method="post" class="dateRangeForm form-vertical">
<div class="form-group">
<label class="control-label">End Date:</label>
<br></br>
<div class="date">
<div class="input-group input-append date dateRangePicker">
<input type="text" class="form-control" name="date" />
<span class="input-group-addon add-on">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</form>
</div>
</div>
</body>
This is the datepicker.js file:
$(document).ready(function() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10)
dd='0'+dd
if (mm < 10)
mm='0'+mm
today = mm+'/'+dd+'/'+yyyy;
$('.dateRangePicker')
.datepicker({
format: 'mm/dd/yyyy',
startDate: '01/01/2010',
endDate: today
})
.on('changeDate', function(e) {
// Revalidate the date field
$('.dateRangeForm').formValidation('revalidateField', 'date');
});
$('.dateRangeForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
date: {
validators: {
notEmpty: {
message: 'The date is required'
},
date: {
format: 'MM/DD/YYYY',
min: '01/01/2010',
max: today,
message: 'The date is not a valid'
}
}
}
}
});
});
I'm currently receiving this error:
TypeError: $('.dateRangeForm').formValidation is not a function. (In '$('.dateRangeForm').formValidation', '$('.dateRangeForm').formValidation' is undefined)
(anonymous function)datepicker.js:25
jjquery-2.1.0.min.js:1:26681
fireWithjquery-2.1.0.min.js:1:27490
readyjquery-2.1.0.min.js:1:29294
Ijquery-2.1.0.min.js:1:29458
And I don't know why. Any help would be appreciated.
2 answers
solution1
2 2015-11-27 20:09:03
Try using $(document).load(function() { instead of $(document).ready(function() {
also pass $ to $(document).ready(function($) { ready function if the above does not work.
solution2
0 ACCPTED 2015-11-27 22:27:13
I could solve it calling
bootstrapValidator
instead of
formValidation
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
bootstrap datepicker validation not working
bootstrap 4 call javascript function on form validation
$(…).datepicker is not a function - JQuery - Bootstrap
Bootstrap datepicker close function
datepicker is not a function in bootstrap 4.1
bootstrap-datepicker error: datepicker is not a function
Laravel 7 bootstrap datepicker: Uncaught TypeError: $(…).datepicker is not a function
form validation with bootstrap with integer
Bootstrap Validation for horizontal form
form validation bootstrap 4
Related Tags