چەسپاندن
پێشکەشکردنی فیدباکێکی بەنرخ و کردار بۆ بەکارهێنەرانت بە چەسپاندنی فۆڕمی HTML5، لە ڕێگەی هەڵسوکەوتی پێشوەختەی وێبگەڕ یان شێوازە تایبەتەکان و جاڤاسکڕێپت.
چۆن کاردەکات
لێرەدا چۆنێتی کارکردنی چەسپاندنی فۆڕم لەگەڵ Bootstrap دەبینین:
- چەسپاندنی فۆڕمی HTML لە ڕێگەی دوو پۆلی ساختەی CSS جێبەجێ دەکرێت،
:invalid
و:valid
. بۆ<input>
,<select>
, و<textarea>
توخمەکان دەگرێتەوە. - بووتستراپ مەودای ستایلەکانی
:invalid
و:valid
بۆ پۆلی باوک.was-validated
دەکات، بەزۆری بۆ پۆلەکە بەکاردەهێنرێت<form>
. ئەگەرنا هەر مەیدانێکی پێویست بەبێ بەها لە کاتی بارکردنی لاپەڕەدا وەک نادروست دەردەکەوێت. بەم شێوەیە، دەتوانیت هەڵبژێریت کەی چالاکیان بکەیت (بە شێوەیەکی گشتی دوای ئەوەی هەوڵی پێشکەشکردنی فۆڕم دەدرێت). - بۆ ڕێستکردنی دەرکەوتنی فۆڕمەکە (بۆ نموونە، لە حاڵەتی پێشکەشکردنی فۆڕمی داینامیکی بە بەکارهێنانی AJAX)،
.was-validated
پۆلەکە لە<form>
دووبارە دوای پێشکەشکردن دەربهێنە. - وەکو پاشەکشە،
.is-invalid
و.is-valid
پۆلەکان لەوانەیە لەبری پۆلە ساختەکان بۆ چەسپاندنی لایەنی ڕاژەکار بەکاربهێنرێن . ئەوان پێویستیان بە.was-validated
پۆلی دایک و باوک نییە. - بەهۆی سنووردارکردن لە چۆنیەتی کارکردنی CSS، ناتوانین (لە ئێستادا) ستایلەکان بۆ a
<label>
کە پێش کۆنترۆڵی فۆڕمێک لە DOM دێت بەبێ یارمەتی جاڤاسکڕێپتی تایبەت بەکاربهێنین. - هەموو وێبگەڕە مۆدێرنەکان پشتگیری لە API ی چەسپاندنی سنووردار دەکەن، زنجیرەیەک شێوازی جاڤاسکڕێپت بۆ چەسپاندنی کۆنتڕۆڵەکانی فۆڕم.
- ڕەنگە نامەکانی فیدباک لە پێشوەختەی وێبگەڕەکان (جیاواز بۆ هەر وێبگەڕێک، و لە ڕێگەی CSS ەوە ناستایل) یان شێوازەکانی فیدباک تایبەتمان بە HTML و CSSی زیادە کەڵک وەربگرن.
- دەتوانیت پەیامی ڕەوایی تایبەتمەند لەگەڵ
setCustomValidity
لە جاڤاسکڕێپتدا دابین بکەیت.
بەو بیرۆکەیە، ئەم دیمۆکانی خوارەوە لەبەرچاو بگرە بۆ شێوازەکانی چەسپاندنی فۆڕمی تایبەتمەندمان، پۆلەکانی لایەنی سێرڤەری هەڵبژاردە و پێشوەختەی وێبگەڕ.
ستایلە تایبەتەکان
بۆ پەیامەکانی چەسپاندنی فۆڕمی Bootstrap تایبەتمەند، پێویستە novalidate
تایبەتمەندی boolean زیاد بکەیت بۆ <form>
. ئەمەش ئامرازەکانی فیدباکەکانی پێشوەختەی وێبگەڕەکە لەکاردەخات، بەڵام هێشتا دەستڕاگەیشتن بە APIیەکانی چەسپاندنی فۆڕم لە جاڤاسکڕێپتدا دابین دەکات. هەوڵبدە فۆڕمی خوارەوە پێشکەش بکەیت؛ جاڤاسکڕێپتەکەمان دوگمەی ناردن دەگرێت و فیدباکەکانت دەگوازێتەوە. لە کاتی هەوڵدان بۆ پێشکەشکردن، دەبینیت کە :invalid
و :valid
ستایلەکان بۆ کۆنتڕۆڵەکانی فۆڕمەکەت جێبەجێ دەکرێن.
شێوازە تایبەتەکانی فیدباک ڕەنگی تایبەتمەند، سنوورەکان، شێوازەکانی فۆکەس و ئایکۆنی پاشبنەما بەکاردەهێنن بۆ باشتر گەیاندنی فیدباک. ئایکۆنی پاشبنەما بۆ <select>
s تەنها بە .form-select
, بەردەستە و نا .form-control
.
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-4">
<label for="validationCustom01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationCustom02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationCustomUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">@</span>
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
<div class="col-md-6">
<label for="validationCustom03" class="form-label">City</label>
<input type="text" class="form-control" id="validationCustom03" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3">
<label for="validationCustom04" class="form-label">State</label>
<select class="form-select" id="validationCustom04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3">
<label for="validationCustom05" class="form-label">Zip</label>
<input type="text" class="form-control" id="validationCustom05" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
وێبگەڕ بە پێشوەختە
ئارەزووی پەیامی فیدباکەکانی ڕەچاوکردنی تایبەتمەند یان نووسینی جاڤاسکڕێپت بۆ گۆڕینی هەڵسوکەوتەکانی فۆڕم نییە؟ هەمووی باشە، دەتوانیت بەپێی پێشوەختەکانی وێبگەڕەکە بەکاربهێنیت. هەوڵبدە فۆڕمی خوارەوە پێشکەش بکەیت. بەپێی وێبگەڕ و سیستەمی کارپێکردنەکەت، شێوازێکی کەمێک جیاوازی فیدباک دەبینیت.
لە کاتێکدا ئەم شێوازانەی فیدباک ناتوانرێت بە CSS ستایل بکرێن، بەڵام دەتوانیت دەقی فیدباکەکە لە ڕێگەی جاڤاسکڕێپتەوە خۆکارانە بکەیت.
<form class="row g-3">
<div class="col-md-4">
<label for="validationDefault01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationDefault01" value="Mark" required>
</div>
<div class="col-md-4">
<label for="validationDefault02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationDefault02" value="Otto" required>
</div>
<div class="col-md-4">
<label for="validationDefaultUsername" class="form-label">Username</label>
<div class="input-group">
<span class="input-group-text" id="inputGroupPrepend2">@</span>
<input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required>
</div>
</div>
<div class="col-md-6">
<label for="validationDefault03" class="form-label">City</label>
<input type="text" class="form-control" id="validationDefault03" required>
</div>
<div class="col-md-3">
<label for="validationDefault04" class="form-label">State</label>
<select class="form-select" id="validationDefault04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
</div>
<div class="col-md-3">
<label for="validationDefault05" class="form-label">Zip</label>
<input type="text" class="form-control" id="validationDefault05" required>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
<label class="form-check-label" for="invalidCheck2">
Agree to terms and conditions
</label>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
لایەنی سێرڤەر
پێشنیار دەکەین کە ڕەچاوکردنی لایەنی مشتەری بەکاربهێنیت، بەڵام لە ئەگەری ئەوەی پێویستت بە ڕەچاوکردنی لایەنی ڕاژەکار هەبێت، دەتوانیت مەیدانی فۆڕمی نادروست و دروست بە و ئاماژە .is-invalid
پێبدەیت .is-valid
. تێبینی بکە کە .invalid-feedback
لەگەڵ ئەم پۆلانەشدا پشتگیری دەکرێت.
بۆ بواری نادروست، دڵنیابە لەوەی کە پەیامی فیدباک/هەڵەی نادروست پەیوەستە بە بواری فۆڕمی پەیوەندیدار بە بەکارهێنانی aria-describedby
(تێبینی بکە کە ئەم تایبەتمەندییە ڕێگە بە زیاتر لە یەکێک id
دەدات ئاماژە بکرێت، لە ئەگەری ئەوەی کە مەیدانەکە پێشتر ئاماژە بە دەقی فۆڕمی زیادە بکات).
بۆ چارەسەرکردنی کێشەکان لەگەڵ تیژڕەوی سنوور.has-validation
, گروپەکانی چوونەژوورەوە پێویستیان بە پۆلێکی زیادە هەیە .
<form class="row g-3">
<div class="col-md-4">
<label for="validationServer01" class="form-label">First name</label>
<input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationServer02" class="form-label">Last name</label>
<input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationServerUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend3">@</span>
<input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3 validationServerUsernameFeedback" required>
<div id="validationServerUsernameFeedback" class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
<div class="col-md-6">
<label for="validationServer03" class="form-label">City</label>
<input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
<div id="validationServer03Feedback" class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3">
<label for="validationServer04" class="form-label">State</label>
<select class="form-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div id="validationServer04Feedback" class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3">
<label for="validationServer05" class="form-label">Zip</label>
<input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
<div id="validationServer05Feedback" class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
<label class="form-check-label" for="invalidCheck3">
Agree to terms and conditions
</label>
<div id="invalidCheck3Feedback" class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
توخمە پشتگیریکراوەکان
شێوازەکانی ڕەچاوکردن بۆ ئەم کۆنتڕۆڵ و پێکهاتانەی فۆڕمی خوارەوە بەردەستە:
<input>
s و<textarea>
s لەگەڵ.form-control
(لەوانەش تا یەکێک.form-control
لە گروپەکانی هاتنەژوورەوە)<select>
s لەگەڵ.form-select
.form-check
س
<form class="was-validated">
<div class="mb-3">
<label for="validationTextarea" class="form-label">Textarea</label>
<textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
<div class="invalid-feedback">
Please enter a message in the textarea.
</div>
</div>
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" id="validationFormCheck1" required>
<label class="form-check-label" for="validationFormCheck1">Check this checkbox</label>
<div class="invalid-feedback">Example invalid feedback text</div>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="validationFormCheck2" name="radio-stacked" required>
<label class="form-check-label" for="validationFormCheck2">Toggle this radio</label>
</div>
<div class="form-check mb-3">
<input type="radio" class="form-check-input" id="validationFormCheck3" name="radio-stacked" required>
<label class="form-check-label" for="validationFormCheck3">Or toggle this other radio</label>
<div class="invalid-feedback">More example invalid feedback text</div>
</div>
<div class="mb-3">
<select class="form-select" required aria-label="select example">
<option value="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="invalid-feedback">Example invalid select feedback</div>
</div>
<div class="mb-3">
<input type="file" class="form-control" aria-label="file example" required>
<div class="invalid-feedback">Example invalid form file feedback</div>
</div>
<div class="mb-3">
<button class="btn btn-primary" type="submit" disabled>Submit form</button>
</div>
</form>
ئامۆژگاری ئامرازەکان
ئەگەر شێوازی فۆڕمەکەت ڕێگەی پێدا، دەتوانیت پۆلەکان بگۆڕیتەوە .{valid|invalid}-feedback
بۆ .{valid|invalid}-tooltip
پۆلەکان بۆ پیشاندانی فیدباکەکانی چەسپاندن لە ئامرازێکی ستایلداردا. دڵنیابە کە دایک و باوکێک position: relative
لەسەری بێت بۆ جێگیرکردنی ئامۆژگاری ئامێرەکان. لە نموونەی خوارەوەدا، پۆلەکانی ستوونی ئێمە پێشتر ئەمەیان هەیە، بەڵام ڕەنگە پڕۆژەکەت پێویستی بە ڕێکخستنێکی بەدیل هەبێت.
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-4 position-relative">
<label for="validationTooltip01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-4 position-relative">
<label for="validationTooltip02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-4 position-relative">
<label for="validationTooltipUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
<input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
<div class="invalid-tooltip">
Please choose a unique and valid username.
</div>
</div>
</div>
<div class="col-md-6 position-relative">
<label for="validationTooltip03" class="form-label">City</label>
<input type="text" class="form-control" id="validationTooltip03" required>
<div class="invalid-tooltip">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 position-relative">
<label for="validationTooltip04" class="form-label">State</label>
<select class="form-select" id="validationTooltip04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-tooltip">
Please select a valid state.
</div>
</div>
<div class="col-md-3 position-relative">
<label for="validationTooltip05" class="form-label">Zip</label>
<input type="text" class="form-control" id="validationTooltip05" required>
<div class="invalid-tooltip">
Please provide a valid zip.
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
ساس
گۆڕاوەکان
$form-feedback-margin-top: $form-text-margin-top;
$form-feedback-font-size: $form-text-font-size;
$form-feedback-font-style: $form-text-font-style;
$form-feedback-valid-color: $success;
$form-feedback-invalid-color: $danger;
$form-feedback-icon-valid-color: $form-feedback-valid-color;
$form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
$form-feedback-icon-invalid-color: $form-feedback-invalid-color;
$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>");
میکسینەکان
دوو میکسین پێکەوە کۆدەکرێنەوە، لە ڕێگەی لوپەکەمانەوە ، بۆ دروستکردنی شێوازەکانی فیدباکەکانی چەسپاندنی فۆرممان.
@mixin form-validation-state-selector($state) {
@if ($state == "valid" or $state == "invalid") {
.was-validated #{if(&, "&", "")}:#{$state},
#{if(&, "&", "")}.is-#{$state} {
@content;
}
} @else {
#{if(&, "&", "")}.is-#{$state} {
@content;
}
}
}
@mixin form-validation-state(
$state,
$color,
$icon,
$tooltip-color: color-contrast($color),
$tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
$focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
) {
.#{$state}-feedback {
display: none;
width: 100%;
margin-top: $form-feedback-margin-top;
@include font-size($form-feedback-font-size);
font-style: $form-feedback-font-style;
color: $color;
}
.#{$state}-tooltip {
position: absolute;
top: 100%;
z-index: 5;
display: none;
max-width: 100%; // Contain to parent when possible
padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
margin-top: .1rem;
@include font-size($form-feedback-tooltip-font-size);
line-height: $form-feedback-tooltip-line-height;
color: $tooltip-color;
background-color: $tooltip-bg-color;
@include border-radius($form-feedback-tooltip-border-radius);
}
@include form-validation-state-selector($state) {
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
}
.form-control {
@include form-validation-state-selector($state) {
border-color: $color;
@if $enable-validation-icons {
padding-right: $input-height-inner;
background-image: escape-svg($icon);
background-repeat: no-repeat;
background-position: right $input-height-inner-quarter center;
background-size: $input-height-inner-half $input-height-inner-half;
}
&:focus {
border-color: $color;
box-shadow: $focus-box-shadow;
}
}
}
// stylelint-disable-next-line selector-no-qualifying-type
textarea.form-control {
@include form-validation-state-selector($state) {
@if $enable-validation-icons {
padding-right: $input-height-inner;
background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
}
}
}
.form-select {
@include form-validation-state-selector($state) {
border-color: $color;
@if $enable-validation-icons {
&:not([multiple]):not([size]),
&:not([multiple])[size="1"] {
padding-right: $form-select-feedback-icon-padding-end;
background-image: escape-svg($form-select-indicator), escape-svg($icon);
background-position: $form-select-bg-position, $form-select-feedback-icon-position;
background-size: $form-select-bg-size, $form-select-feedback-icon-size;
}
}
&:focus {
border-color: $color;
box-shadow: $focus-box-shadow;
}
}
}
.form-check-input {
@include form-validation-state-selector($state) {
border-color: $color;
&:checked {
background-color: $color;
}
&:focus {
box-shadow: $focus-box-shadow;
}
~ .form-check-label {
color: $color;
}
}
}
.form-check-inline .form-check-input {
~ .#{$state}-feedback {
margin-left: .5em;
}
}
.input-group .form-control,
.input-group .form-select {
@include form-validation-state-selector($state) {
@if $state == "valid" {
z-index: 1;
} @else if $state == "invalid" {
z-index: 2;
}
&:focus {
z-index: 3;
}
}
}
}
نەخشە
ئەمە نەخشەی چەسپاندنی ساسە لە _variables.scss
. ئەمە سەرپێچی بکە یان درێژ بکەرەوە بۆ دروستکردنی باری جیاواز یان زیادە.
$form-validation-states: (
"valid": (
"color": $form-feedback-valid-color,
"icon": $form-feedback-icon-valid
),
"invalid": (
"color": $form-feedback-invalid-color,
"icon": $form-feedback-icon-invalid
)
);
نەخشەکانی $form-validation-states
دەتوانن سێ پارامێتری هەڵبژاردەیی لەخۆ بگرن بۆ سەرپێچیکردنی ئامرازەکان و شێوازەکانی فۆکەس.
ئەڵقە
بەکاردێت بۆ دووبارەکردنەوە لەسەر $form-validation-states
بەهاکانی نەخشە بۆ دروستکردنی شێوازەکانی چەسپاندنمان. هەر گۆڕانکارییەک لە نەخشەی Sass ی سەرەوەدا لە CSS ی کۆکراوەکەتدا لە ڕێگەی ئەم لوپە ڕەنگ دەداتەوە.
@each $state, $data in $form-validation-states {
@include form-validation-state($state, $data...);
}
خۆکارکردن
دەتوانرێت دۆخی چەسپاندن لە ڕێگەی ساسەوە لەگەڵ $form-validation-states
نەخشەکەدا خۆکارانە بکرێت. _variables.scss
ئەم نەخشەیە لە فایلەکەماندا هەڵکەوتووە ، چۆنێتی دروستکردنی دۆخی پێشوەختە valid
/ invalid
ڕەچاوکردنە. نەخشەیەکی هێلانەکراو لەخۆدەگرێت بۆ خۆکارکردنی ڕەنگ و ئایکۆن و ڕەنگی ئامۆژگاری و سێبەری فۆکەسی هەر ویلایەتێک. لە کاتێکدا هیچ ویلایەتێکی تر لەلایەن وێبگەڕەکانەوە پشتگیری ناکرێت، ئەوانەی ستایلە تایبەتمەندەکان بەکاردەهێنن دەتوانن بە ئاسانی فیدباکەکانی فۆڕمی ئاڵۆزتر زیاد بکەن.
تکایە ئاگاداربە کە ئێمە پێشنیاری خۆکارکردنی بەهاکان ناکەین بەبێ ئەوەی میکسینەکەش $form-validation-states
دەستکاریform-validation-state
بکەیت .