Logo
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
Stockholm-icons / Communication / Group-chat Created with Sketch.
Sean UX Designer
S

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

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%

Shopping Cart

iBlender The best kitchen gadget in 2020
$ 350 for 5
SmartCleaner Smart tool for cooking
$ 650 for 4
CameraMax Professional camera for edge cutting shots
$ 150 for 3
4D Printer Manufactoring unique objects
$ 1450 for 7
MotionWire Perfect animation tool
$ 650 for 7
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