Logo

Form Widgets Validation Examples

<form class="form" id="kt_form">
 <div class="form-group">
  <div class="alert alert-light-primary d-none mb-15" role="alert" id="kt_form_msg">
   <div class="alert-icon">
    <i class="la la-warning"></i>
   </div>
   <div class="alert-text font-weight-bold">
    Oh snap! Change a few things up and try submitting again.
   </div>
   <div class="alert-close">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
     <span><i class="ki ki-close "></i></span>
    </button>
   </div>
  </div>
 </div>

 <div class="form-group row">
  <label class="col-form-label col-lg-3 col-sm-12 text-right">Bootstrap Date Picker *</label>
  <div class="col-lg-4 col-md-9 col-sm-12">
   <div class="input-group">
    <input type="text" class="form-control" name="date" placeholder="Select date" id="kt_datepicker"/>
    <div class="input-group-append">
     <span class="input-group-text">
      <i class="la la-calendar-check-o"></i>
     </span>
    </div>
   </div>
   <span class="form-text text-muted">Select a date</span>
  </div>
 </div>

 <div class="form-group row">
  <label class="col-form-label col-lg-3 col-sm-12 text-right">Bootstrap Date Time Picker *</label>
  <div class="col-lg-4 col-md-9 col-sm-12">
   <div class="input-group date">
    <input type="text" class="form-control" name="datetime" placeholder="Select date & time" id="kt_datetimepicker"/>
    <div class="input-group-append">
     <span class="input-group-text"><i class="la la-calendar-check-o glyphicon-th"></i></span>
    </div>
   </div>
   <span class="form-text text-muted">Select a date time</span>
  </div>
 </div>

 <div class="form-group row">
  <label class="col-form-label col-lg-3 col-sm-12 text-right">Bootstrap Time Picker *</label>
  <div class="col-lg-4 col-md-9 col-sm-12">
   <div class="input-group date">
    <input class="form-control" id="kt_timepicker" placeholder="Select time" name="time" type="text"/>
    <div class="input-group-append">
     <span class="input-group-text"><i class="la la-clock-o"></i></span>
    </div>
   </div>
   <span class="form-text text-muted">Select time</span>
  </div>
 </div>

 <div class="form-group row">
  <label class="col-form-label col-lg-3 col-sm-12 text-right">Bootstrap Date Range Picker *</label>
  <div class="col-lg-4 col-md-9 col-sm-12">
   <div class="input-group" id="kt_daterangepicker">
    <input type="text" class="form-control" readonly name="daterangepicker" placeholder="Select date range"/>
    <div class="input-group-append">
     <span class="input-group-text"><i class="la la-calendar-check-o"></i></span>
    </div>
   </div>
   <span class="form-text text-muted">Select a date range</span>
  </div>
 </div>

 <div class="separator separator-dashed my-10"></div>

 <div class="form-group row">
  <label class="col-form-label col-lg-3 col-sm-12 text-right">Bootstrap Switch *</label>
  <div class="col-lg-4 col-md-9 col-sm-12">
   <input data-switch="true" type="checkbox" name="switch" id="test" data-on-color="success"/>
   <span class="form-text text-muted"></span>
  </div>
 </div>

 <div class="separator separator-dashed my-10"></div>

 <div class="form-group row">
  <label class="col-form-label col-lg-3 col-sm-12 text-right">Bootstrap Select *</label>
  <div class="col-lg-4 col-md-9 col-sm-12">
   <select class="form-control" id="kt_bootstrap_select" multiple name="select">
    <optgroup label="Picnic" data-max-options="2">
     <option>Mustard</option>
     <option>Ketchup</option>
     <option>Relish</option>
    </optgroup>
    <optgroup label="Camping" data-max-options="2">
     <option>Tent</option>
     <option>Flashlight</option>
     <option>Toilet Paper</option>
    </optgroup>
   </select>
   <span class="form-text text-muted">Select at least 2 and maximum 4 options</span>
  </div>
 </div>

 <div class="form-group row">
  <label class="col-form-label col-lg-3 col-sm-12 text-right">Select2 *</label>
  <div class="col-lg-4 col-md-9 col-sm-12">
   <select class="form-control select2" id="kt_select2" name="select2">
    <option label="Label"></option>
    <optgroup label="Alaskan/Hawaiian Time Zone">
     <option value="AK">Alaska</option>
     <option value="HI">Hawaii</option>
    </optgroup>
    <optgroup label="Pacific Time Zone">
     <option value="CA">California</option>
     <option value="NV">Nevada</option>
     <option value="OR">Oregon</option>
     <option value="WA">Washington</option>
    </optgroup>
    <optgroup label="Mountain Time Zone">
     <option value="AZ">Arizona</option>
     <option value="CO">Colorado</option>
     <option value="ID">Idaho</option>
     <option value="MT">Montana</option>
     <option value="NE">Nebraska</option>
     <option value="NM">New Mexico</option>
     <option value="ND">North Dakota</option>
     <option value="UT">Utah</option>
     <option value="WY">Wyoming</option>
    </optgroup>
    <optgroup label="Central Time Zone">
     <option value="AL">Alabama</option>
     <option value="AR">Arkansas</option>
     <option value="IL">Illinois</option>
     <option value="IA">Iowa</option>
     <option value="KS">Kansas</option>
     <option value="KY">Kentucky</option>
     <option value="LA">Louisiana</option>
     <option value="MN">Minnesota</option>
     <option value="MS">Mississippi</option>
     <option value="MO">Missouri</option>
     <option value="OK">Oklahoma</option>
     <option value="SD">South Dakota</option>
     <option value="TX">Texas</option>
     <option value="TN">Tennessee</option>
     <option value="WI">Wisconsin</option>
    </optgroup>
    <optgroup label="Eastern Time Zone">
     <option value="CT">Connecticut</option>
     <option value="DE">Delaware</option>
     <option value="FL">Florida</option>
     <option value="GA">Georgia</option>
     <option value="IN">Indiana</option>
     <option value="ME">Maine</option>
     <option value="MD">Maryland</option>
     <option value="MA">Massachusetts</option>
     <option value="MI">Michigan</option>
     <option value="NH">New Hampshire</option>
     <option value="NJ">New Jersey</option>
     <option value="NY">New York</option>
     <option value="NC">North Carolina</option>
     <option value="OH">Ohio</option>
     <option value="PA">Pennsylvania</option>
     <option value="RI">Rhode Island</option>
     <option value="SC">South Carolina</option>
     <option value="VT">Vermont</option>
     <option value="VA">Virginia</option>
     <option value="WV">West Virginia</option>
    </optgroup>
   </select>
   <span class="form-text text-muted">Select an option</span>
  </div>
 </div>

 <div class="form-group row">
  <label class="col-form-label col-lg-3 col-sm-12 text-right">Typeahead *</label>
  <div class="col-lg-4 col-md-9 col-sm-12">
   <div class="typeahead">
    <input class="form-control" id="kt_typeahead" type="text" name="typeahead" placeholder="States of USA"/>
   </div>
   <span class="form-text text-muted">Please select a state</span>
  </div>
 </div>

 <div class="separator separator-dashed my-10"></div>

 <div class="form-group row">
  <label class="col-form-label col-lg-3 col-sm-12 text-right">Markdown *</label>
  <div class="col-lg-7 col-md-9 col-sm-12">
   <textarea name="markdown" class="form-control" data-provide="markdown" rows="10"></textarea>
   <span class="form-text text-muted">Enter some markdown content</span>
  </div>
 </div>

 <div class="row">
  <div class="col-lg-9 ml-lg-auto">
   <button type="submit" class="btn btn-primary mr-2">Validate</button>
   <button type="reset" class="btn btn-light-primary">Cancel</button>
  </div>
 </div>
</form>
// Validation Rules
validator = FormValidation.formValidation(
 document.getElementById('kt_form'),
 {
  fields: {
   date: {
    validators: {
     notEmpty: {
      message: 'Date is required'
     }
    }
   },
   daterangepicker: {
    validators: {
     notEmpty: {
      message: 'Daterange is required'
     }
    }
   },
   datetime: {
    validators: {
     notEmpty: {
      message: 'Datetime is required'
     }
    }
   },
   time: {
    validators: {
     notEmpty: {
      message: 'Time is required'
     }
    }
   },
   select: {
    validators: {
     notEmpty: {
      message: 'Select is required'
     }
    }
   },
   select2: {
    validators: {
     notEmpty: {
      message: 'Select2 is required'
     }
    }
   },
   typeahead: {
    validators: {
     notEmpty: {
      message: 'Typeahead is required'
     }
    }
   },
   switch: {
    validators: {
     notEmpty: {
      message: 'Typeahead is required'
     }
    }
   },
   markdown: {
    validators: {
     notEmpty: {
      message: 'Typeahead is required'
     }
    }
   },
  },

  plugins: {
   trigger: new FormValidation.plugins.Trigger(),
   submitButton: new FormValidation.plugins.SubmitButton(),
   bootstrap: new FormValidation.plugins.Bootstrap({
    eleInvalidClass: '',
    eleValidClass: '',
   })
  }
 }
);

// Initialize Plugins
// Datepicker
$('#kt_datepicker').datepicker({
 todayHighlight: true,
 templates: {
  leftArrow: '<i class="la la-angle-left"></i>',
  rightArrow: '<i class="la la-angle-right"></i>'
 }
}).on('changeDate', function(e) {
 // Revalidate field
 validator.revalidateField('date');
});

// Datetimepicker
$('#kt_datetimepicker').datetimepicker({
 pickerPosition: 'bottom-left',
 todayHighlight: true,
 autoclose: true,
 format: 'yyyy.mm.dd hh:ii'
});

$('#kt_datetimepicker').change(function() {
 // Revalidate field
 validator.revalidateField('datetime');
});

// Timepicker
$('#kt_timepicker').timepicker({
 minuteStep: 1,
 showSeconds: true,
 showMeridian: true
});

$('#kt_timepicker').change(function() {
 // Revalidate field
 validator.revalidateField('time');
});

// Daterangepicker
$('#kt_daterangepicker').daterangepicker({
 buttonClasses: ' btn',
 applyClass: 'btn-primary',
 cancelClass: 'btn-light-primary'
}, function(start, end, label) {
 var input = $('#kt_daterangepicker').find('.form-control');
 input.val( start.format('YYYY/MM/DD') + ' / ' + end.format('YYYY/MM/DD'));

 // Revalidate field
 validator.revalidateField('daterangepicker');
});

// Bootstrap Switch
$('[data-switch=true]').bootstrapSwitch();
$('[data-switch=true]').on('switchChange.bootstrapSwitch', function() {
 // Revalidate field
 validator.revalidateField('switch');
});

// Bootstrap Select
$('#kt_bootstrap_select').selectpicker();
$('#kt_bootstrap_select').on('changed.bs.select', function() {
 // Revalidate field
 validator.revalidateField('select');
});

// Select2
$('#kt_select2').select2({
 placeholder: "Select a state",
});

$('#kt_select2').on('change', function(){
 // Revalidate field
 validator.revalidateField('select2');
});

// Typeahead
var countries = new Bloodhound({
 datumTokenizer: Bloodhound.tokenizers.whitespace,
 queryTokenizer: Bloodhound.tokenizers.whitespace,
 prefetch: HOST_URL + '/api/?file=typeahead/countries.json'
});

$('#kt_typeahead').typeahead(null, {
 name: 'countries',
 source: countries
});

$('#kt_typeahead').bind('typeahead:select', function(ev, suggestion) {
 // Revalidate field
 validator.revalidateField('typeahead');
});
Select a date
Select a date time
Select time
Select a date range
ON OFF
Select at least 2 and maximum 4 options
Select an option
Please select a state
Enter some markdown content

User Profile 12 messages

James Jones
Application Developer
Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Select A Demo