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 گزینه را انتخاب کنید
انتخاب گزینه
لطفا انتخاب کنید یک استان
برخی از محتوای نشانه گذاری را وارد کنید

اعلان ها 24 جدید

اقدامات سریع امور مالی

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

آخرین اعلان ها
اهداف دیگر موعد 2 روز
+28%
+50%
بهترین محصول موعد 2 روز
+8%
پیام های سیستم
نویسندگان برتر موفق ترین ها
+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