Logo

Projects

Bravio Application By James
Quick Reports By Ana
CRM Reporting Tool By Adam
DB Management By CRA Team
Cloud Service By iC Team
Disqus Project By PV Inc.
Plurk Meeting By Plurk Team.

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

Quick Actions finance & reports

User Profile 12 messages

Recent Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
System Messages
Top Authors Most Successful Fellas
+82$
Popular Authors Most Successful Fellas
+280$
New Users Most Successful Fellas
+4500$
Active Customers Most Successful Fellas
+4500$
Bestseller Theme Most Successful Fellas
+4500$
Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
Customer Care
Reports
Memebers
Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo