Logo
Keen fully integrates FormValidation, the best Premium From Validation Library for JavaScript. Zero dependencies!
For more info please visit FormValidation Home

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
Select at least 2 and maximum 4 options
Select an option
Please select a state
Enter some markdown content

Notifications 24 New

Quick Actions finance & reports

User Profile 15 messages

Recent Notifications

Important Notice

Lorem Ipsum is simply dummy text of the printing and industry.

System Update

There are many variations of passages of Lorem Ipsum available.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Notifications
Pic
Marcus Smart UI/UX, Art Director
+65%
AH
Andreas Hawks Python Developer
+23%
SC
Sarah Connor HTML, CSS. jQuery
-34%
Pic
Amanda Harden UI/UX, Art Director
+72%
SR
Sean Robbins UI/UX, Art Director
+65%
JT
Jason Tatum ASP.NET Developer
+139%

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9