Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!-- Bootstrap CSS v3 -->
- <link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css">
- <!-- FormValidation CSS file -->
- <link rel="stylesheet" href="/vendor/formvalidation/dist/css/formValidation.min.css">
- <link rel="stylesheet" type="text/css" href="http://10.237.102.158/trainingV2/lib/css/bootstrap.min.css">
- <link rel="stylesheet" type="text/css" href="http://10.237.102.158/trainingV2/lib/css/font-awesome.min.css">
- <link rel="stylesheet" type="text/css" href="http://10.237.102.158/trainingV2/lib/css/animate.min.css">
- <link rel="stylesheet" type="text/css" href="http://10.237.102.158/trainingV2/lib/css/bootstrap-switch.min.css">
- <link rel="stylesheet" type="text/css" href="http://10.237.102.158/trainingV2/lib/css/checkbox3.min.css">
- <link rel="stylesheet" type="text/css" href="http://10.237.102.158/trainingV2/lib/css/jquery.dataTables.min.css">
- <link rel="stylesheet" type="text/css" href="http://10.237.102.158/trainingV2/lib/css/dataTables.bootstrap.css">
- <link rel="stylesheet" type="text/css" href="http://10.237.102.158/trainingV2/lib/css/select2.min.css">
- <link rel="stylesheet" type="text/css" href="http://10.237.102.158/trainingV2/css/date2.css">
- <link rel="stylesheet" type="text/css" href="http://10.237.102.158/trainingV2/css/date3.css">
- <!-- Include Bootstrap Datepicker -->
- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" />
- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.min.css" />
- <link rel="stylesheet" type="text/css" href="http://10.237.102.158/trainingV2/css/style.css">
- <link rel="stylesheet" type="text/css" href="http://10.237.102.158/trainingV2/css/themes/flat-blue.css">
- <script type="text/javascript" src="../lib/js/jquery.min2.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
- <style type="text/css">
- /**
- * Override feedback icon position
- * See http://formvalidation.io/examples/adjusting-feedback-icon-position/
- */
- #eventForm .dateContainer .form-control-feedback {
- top: 0;
- right: -15px;
- }
- </style>
- <form id="eventForm" method="post" class="form-horizontal">
- <div class="form-group">
- <label class="col-xs-3 control-label">Event</label>
- <div class="col-xs-5">
- <input type="text" class="form-control" name="name" />
- </div>
- </div>
- <div class="form-group">
- <label class="col-xs-3 control-label">Start date</label>
- <div class="col-xs-5 dateContainer">
- <div class="input-group input-append date" id="startDatePicker">
- <input type="text" class="form-control" name="startDate" />
- <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
- </div>
- </div>
- </div>
- <div class="form-group">
- <label class="col-xs-3 control-label">End date</label>
- <div class="col-xs-5 dateContainer">
- <div class="input-group input-append date" id="endDatePicker">
- <input type="text" class="form-control" name="endDate" />
- <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
- </div>
- </div>
- </div>
- <div class="form-group">
- <div class="col-xs-5 col-xs-offset-3">
- <button type="submit" class="btn btn-default">Validate</button>
- </div>
- </div>
- </form>
- <script>
- $(document).ready(function() {
- $('#startDatePicker')
- .datepicker({
- format: 'mm/dd/yyyy'
- })
- .on('changeDate', function(e) {
- // Revalidate the start date field
- $('#eventForm').formValidation('revalidateField', 'startDate');
- });
- $('#endDatePicker')
- .datepicker({
- format: 'mm/dd/yyyy'
- })
- .on('changeDate', function(e) {
- $('#eventForm').formValidation('revalidateField', 'endDate');
- });
- $('#eventForm')
- .formValidation({
- framework: 'bootstrap',
- icon: {
- valid: 'glyphicon glyphicon-ok',
- invalid: 'glyphicon glyphicon-remove',
- validating: 'glyphicon glyphicon-refresh'
- },
- fields: {
- name: {
- validators: {
- notEmpty: {
- message: 'The name is required'
- }
- }
- },
- startDate: {
- validators: {
- notEmpty: {
- message: 'The start date is required'
- },
- date: {
- format: 'MM/DD/YYYY',
- max: 'endDate',
- message: 'The start date is not a valid'
- }
- }
- },
- endDate: {
- validators: {
- notEmpty: {
- message: 'The end date is required'
- },
- date: {
- format: 'MM/DD/YYYY',
- min: 'startDate',
- message: 'The end date is not a valid'
- }
- }
- }
- }
- })
- .on('success.field.fv', function(e, data) {
- if (data.field === 'startDate' && !data.fv.isValidField('endDate')) {
- // We need to revalidate the end date
- data.fv.revalidateField('endDate');
- }
- if (data.field === 'endDate' && !data.fv.isValidField('startDate')) {
- // We need to revalidate the start date
- data.fv.revalidateField('startDate');
- }
- });
- });
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement