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