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 kt-bootstrap-select" 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
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

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Demo 23
Demo 24
Demo 25
Demo 26
Demo 27
Demo 28
Demo 29
Demo 30