Logo
سلام, محسن م

ابزارکهای فرم اعتبارسنجی


						<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="نزدیک">
											<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">بوت استرپ تاریخ *</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="انتخاب تاریخ" 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">انتخاب تاریخ</span>
								</div>
							</div>

							<div class="form-group row">
								<label class="col-form-label col-lg-3 col-sm-12 text-right">بوت استرپ تاریخ زمان *</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="انتخاب تاریخ & 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">انتخاب تاریخ و زمان</span>
								</div>
							</div>

							<div class="form-group row">
								<label class="col-form-label col-lg-3 col-sm-12 text-right">بوت استرپ زمان  *</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="انتخاب زمان" 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">انتخاب زمان</span>
								</div>
							</div>

							<div class="form-group row">
								<label class="col-form-label col-lg-3 col-sm-12 text-right">بوت استرپ تاریخ دامنه *</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="انتخاب تاریخ"/>
										<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">انتخاب یک رنج تاریخ</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">بوت استرپ سوئیچ *</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">انتخابگر بوت استرپ *</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">حداقل 2 و حداکثر 4 گزینه را انتخاب کنید</span>
								</div>
							</div>

							<div class="form-group row">
								<label class="col-form-label col-lg-3 col-sm-12 text-right">انتخابگر2 *</label>
								<div class="col-lg-4 col-md-9 col-sm-12">
									<select class="form-control select2" id="kt_select2" name="select2">
										<option label="برچسب"></option>
										<optgroup label="آلاسکا / هاوایی منطقه زمانی">
											<option value="آ ک">آلاسکا</option>
											<option value="HI">هاوایی</option>
										</optgroup>
										<optgroup label="منطقه اقیانوس آرام زمانی">
											<option value="CA">کالیفرنیا</option>
											<option value="NV">نوادا</option>
											<option value="OR">اورگان</option>
											<option value="WA">واشنگتن</option>
										</optgroup>
										<optgroup label=" منطقه زمانی موینتین ">
											<option value="AZ">آریزونا</option>
											<option value="CO">کالرادو</option>
											<option value="ID">آیداهو</option>
											<option value="MT">مونتانا</option>
											<option value="NE">نبراسکا</option>
											<option value="NM">نیو مکزیکو</option>
											<option value="ND">داکوتای شمالی</option>
											<option value="UT">یوتا</option>
											<option value="WY">وایومینگ</option>
										</optgroup>
										<optgroup label="منطقه زمانی مرکزی ">
											<option value="AL">آلاباما</option>
											<option value="AR">آرکانزاس</option>
											<option value="IL">ایلینویز</option>
											<option value="IA">آیووا</option>
											<option value="KS">کانزاس</option>
											<option value="KY">کنتاکی</option>
											<option value="LA">لوئیزیانا</option>
											<option value="MN">مینه سوتا</option>
											<option value="MS">می سی سی پی</option>
											<option value="MO">میسوری</option>
											<option value="OK">اوکلاهما</option>
											<option value="SD">داکوتای جنوبی</option>
											<option value="TX">تگزاس</option>
											<option value="TN">تنسی</option>
											<option value="WI">ویسکانسین</option>
										</optgroup>
										<optgroup label=" منطقه زمانی شرقی ">
											<option value="CT">کانکتیکات</option>
											<option value="DE">دلاور</option>
											<option value="FL">فلوریدا</option>
											<option value="GA">جورجیا</option>
											<option value="IN">هندوستان</option>
											<option value="ME">ماین</option>
											<option value="MD">یلند مارچ</option>
											<option value="MA">ماساچوست</option>
											<option value="MI">میشیگان</option>
											<option value="NH">نیو همپشایر</option>
											<option value="NJ">نیو جرسی</option>
											<option value="NY">نیویورک</option>
											<option value="NC">کارولینای شمالی</option>
											<option value="OH">اوهایو</option>
											<option value="PA">پنسیلوانیا</option>
											<option value="RI">رود آیلند</option>
											<option value="SC">کارولینای جنوبی</option>
											<option value="VT">ورمونت</option>
											<option value="VA">ویرجینیا</option>
											<option value="WV">ویرجینیا غربی</option>
										</optgroup>
									</select>
									<span class="form-text text-muted">انتخاب گزینه</span>
								</div>
							</div>

							<div class="form-group row">
								<label class="col-form-label col-lg-3 col-sm-12 text-right">تایپ هد *</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="ایالات آمریکا"/>
									</div>
									<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">مارک دان *</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">برخی از محتوای نشانه گذاری را وارد کنید</span>
								</div>
							</div>

							<div class="row">
								<div class="col-lg-9 ml-lg-auto">
									<button type="submit" class="btn btn-primary mr-2">اعتبارسنجی</button>
									<button type="reset" class="btn btn-light-primary">لغو</button>
								</div>
							</div>
						</form>
						

						// Validation Rules
						validator = FormValidation.formValidation(
							document.getElementById('kt_form'),
							{
								fields: {
									date: {
										validators: {
											notEmpty: {
												message: 'تاریخ is required'
											}
										}
									},
									daterangepicker: {
										validators: {
											notEmpty: {
												message: 'تاریخrange is required'
											}
										}
									},
									datetime: {
										validators: {
											notEmpty: {
												message: 'تاریخtime is required'
											}
										}
									},
									time: {
										validators: {
											notEmpty: {
												message: 'زمان is required'
											}
										}
									},
									select: {
										validators: {
											notEmpty: {
												message: 'انتخاب is required'
											}
										}
									},
									select2: {
										validators: {
											notEmpty: {
												message: 'انتخابگر2 is required'
											}
										}
									},
									typeahead: {
										validators: {
											notEmpty: {
												message: 'تایپ هد is required'
											}
										}
									},
									switch: {
										validators: {
											notEmpty: {
												message: 'تایپ هد is required'
											}
										}
									},
									markdown: {
										validators: {
											notEmpty: {
												message: 'تایپ هد is required'
											}
										}
									},
								},

								plugins: {
									trigger: new FormValidation.plugins.Trigger(),
									submitدکمه: new FormValidation.plugins.ارسالدکمه(),
									bootstrap: new FormValidation.plugins.بوت استرپ({
										eleInvalidکلاس: '',
										eleValidکلاس: '',
									})
								}
							}
						);

						// Initialize Plugins
						// انتخابگر تاریخ
						دلار('#kt_datepicker').datepicker({
							todayسلامghlight: true,
							templates: {
								leftArrow: '<i class="la la-angle-left"></i>',
								rightArrow: '<i class="la la-angle-right"></i>'
							}
						}).on('changeتاریخ', function(e) {
							// Revalidate field
							validator.revalidateField('date');
						});

						// انتخابگر تاریخ و زمان
						دلار('#kt_datetimepicker').datetimepicker({
							pickerPosition: 'bottom-left',
							todayسلامghlight: true,
							autoclose: true,
							format: 'yyyy.mm.dd hh:ii'
						});

						دلار('#kt_datetimepicker').change(function() {
							// Revalidate field
							validator.revalidateField('datetime');
						});

						// انتخاب گر زمان
						دلار('#kt_timepicker').timepicker({
							minuteگام: 1,
							showSeconds: true,
							showMeridian: true
						});

						دلار('#kt_timepicker').change(function() {
							// Revalidate field
							validator.revalidateField('time');
						});

						// انتخابگر رنج تاریخ
						دلار('#kt_daterangepicker').daterangepicker({
							buttonکلاسes: ' btn',
							applyکلاس: 'btn-primary',
							cancelکلاس: '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');
						});

						// بوت استرپ سوئیچ
						دلار('[data-switch=true]').bootstrapسوئیچ();
						دلار('[data-switch=true]').on('switchChange.bootstrapسوئیچ', function() {
							// Revalidate field
							validator.revalidateField('switch');
						});

						// انتخابگر بوت استرپ
						دلار('#kt_bootstrap_select').selectpicker();
						دلار('#kt_bootstrap_select').on('changed.bs.select', function() {
							// Revalidate field
							validator.revalidateField('select');
						});

						// انتخابگر2
						دلار('#kt_select2').select2({
							placeholder: "انتخاب a state",
						});

						دلار('#kt_select2').on('change', function(){
							// Revalidate field
							validator.revalidateField('select2');
						});

						// تایپ هد
						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');
						});
						
انتخاب تاریخ
انتخاب تاریخ و زمان
انتخاب زمان
انتخاب یک رنج تاریخ
حداقل 2 و حداکثر 4 گزینه را انتخاب کنید
انتخاب گزینه
لطفا انتخاب کنید یک استان
برخی از محتوای نشانه گذاری را وارد کنید

پروفایل کاربر 12 پیام

آخرین اعلان ها
اهداف دیگر موعد 2 روز
+28%
+50%
بهترین محصول موعد 2 روز
+8%

سبد خرید

iBlender بهترین وسایل آشپزخانه در سال 2020
دلار 350 5
پاک کننده هوشمند ابزار هوشمند برای پخت و پز
650دلار 4
دوربین دوربین حرفه ای برای عکس
150دلار 3
چاپگر 4D ساخت اشیاء منحصر به فرد
دلار 1450 7
موشن ابزار انیمیشن ایده آل
650دلار 7
پیام های سیستم
نویسندگان برتر موفق ترین ها
+82دلار
نویسندگان محبوب موفق ترین ها
+280دلار
کاربران جدید موفق ترین ها
+4500دلار
فعال مشتریان موفق ترین ها
+4500دلار
تم پرفروش موفق ترین ها
+4500دلار
اعلان ها
اهداف دیگر موعد 2 روز
+28%
+50%
بهترین محصول موعد 2 روز
+8%
مراقبت از مشتری
گزارشات
اعضا

انتخاب نسخه ی نمایشی

نسخه ی نمایشی 1
نسخه ی نمایشی 2
نسخه ی نمایشی 3
نسخه ی نمایشی 4
نسخه ی نمایشی 5
نسخه ی نمایشی 6
نسخه ی نمایشی 7
نسخه ی نمایشی 8
نسخه ی نمایشی 9
نسخه ی نمایشی 10
نسخه ی نمایشی 11
نسخه ی نمایشی 12
نسخه ی نمایشی 13
نسخه ی نمایشی 14
نسخه ی نمایشی 15
نسخه ی نمایشی 16
نسخه ی نمایشی 17
نسخه ی نمایشی 18
نسخه ی نمایشی 19
نسخه ی نمایشی 20
نسخه ی نمایشی 21
نسخه ی نمایشی 22
نسخه ی نمایشی 23
نسخه ی نمایشی 24
نسخه ی نمایشی 25
نسخه ی نمایشی 26
نسخه ی نمایشی 27
نسخه ی نمایشی 28
نسخه ی نمایشی 29
نسخه ی نمایشی 30