Валидация
Браузердің әдепкі әрекеттері немесе реттелетін мәнерлер және JavaScript арқылы HTML5 пішінін тексеру арқылы пайдаланушыларға құнды, әрекет етуге болатын кері байланысты қамтамасыз етіңіз.
Бұл қалай жұмыс істейді
Пішінді тексеру Bootstrap көмегімен қалай жұмыс істейді:
- HTML пішінінің валидациясы CSS екі псевдоклассы
:invalid
және арқылы қолданылады:valid
. Ол<input>
,<select>
, және<textarea>
элементтеріне қолданылады. - Bootstrap әдетте .
:invalid
_:valid
_ Әйтпесе, мәнсіз кез келген қажетті өріс бет жүктеу кезінде жарамсыз болып көрсетіледі. Осылайша, сіз оларды қашан белсендіру керектігін таңдай аласыз (әдетте пішінді жіберу әрекетінен кейін)..was-validated
<form>
- Пішіннің сыртқы түрін қалпына келтіру үшін (мысалы, AJAX көмегімен динамикалық пішінді жіберу жағдайында), жіберілгеннен кейін
.was-validated
сыныпты<form>
қайтадан алып тастаңыз. - Резерв ретінде
.is-invalid
және серверлік тексеру.is-valid
үшін псевдосыныптардың орнына сыныптар пайдаланылуы мүмкін . Олар ата- аналық сыныпты қажет етпейді ..was-validated
- CSS жұмысындағы шектеулерге байланысты біз (қазіргі уақытта)
<label>
таңдамалы JavaScript көмегінсіз DOM ішіндегі пішін басқару элементінен бұрын келетін мәнерлерді қолдана алмаймыз. - Барлық заманауи шолғыштар пішім басқару элементтерін тексеруге арналған JavaScript әдістерінің қатарын, шектеуді тексеру API қолдайды.
- Кері байланыс хабарлары браузердің әдепкі параметрлерін (әр браузер үшін әр түрлі және CSS арқылы реттелмейтін) немесе қосымша HTML және CSS көмегімен реттелетін кері байланыс мәнерлерін пайдалануы мүмкін.
setCustomValidity
Сіз JavaScript арқылы теңшелетін жарамдылық хабарларын бере аласыз .
Осыны ескере отырып, біздің теңшелетін пішінді тексеру мәнерлеріміз, қосымша серверлік сыныптар және браузердің әдепкі параметрлері үшін келесі демонстрацияларды қарастырыңыз.
Арнайы стильдер
Пайдаланушы Bootstrap пішінін тексеру хабарлары үшін novalidate
логикалық төлсипатты өзіңіздің <form>
. Бұл шолғыштың әдепкі кері байланыс кеңестерін өшіреді, бірақ әлі де JavaScript ішіндегі пішінді тексеру API интерфейстеріне қатынасты қамтамасыз етеді. Төмендегі пішінді жіберіп көріңіз; біздің JavaScript жіберу түймесін басып, сізге кері байланыс жібереді. Жіберуге әрекет жасағанда , пішін басқару элементтеріне қолданылатын :invalid
және мәнерлерді көресіз .:valid
Реттелетін кері байланыс мәнерлері кері байланысты жақсырақ жеткізу үшін реттелетін түстерді, жиектерді, фокус мәнерлерін және фондық белгішелерді қолданады. s үшін фондық белгішелер <select>
тек арқылы қол жетімді .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)
})
})()
Браузердің әдепкі параметрлері
Пішін әрекеттерін өзгерту үшін теңшелетін тексеру туралы кері байланыс хабарлары немесе JavaScript жазу қызықты емес пе? Бәрі жақсы, сіз браузердің әдепкі параметрлерін пайдалана аласыз. Төмендегі пішінді жіберіп көріңіз. Браузеріңізге және ОЖ-ға байланысты сіз сәл басқа пікір стилін көресіз.
Бұл кері байланыс мәнерлерін CSS көмегімен стильдеу мүмкін болмаса да, сіз JavaScript арқылы кері байланыс мәтінін теңшей аласыз.
<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>
с бірге.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;
}
}
}
}
Карта
Бұл Sass картасының валидациясы _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
Тексеру күйлерін Sass арқылы картамен теңшеуге болады . Біздің файлда орналасқан бұл Sass картасы әдепкі / тексеру күйлерін _variables.scss
жасау әдісі болып табылады . Әрбір күйдің түсін, белгішесін, құралдар кеңесінің түсін және фокус көлеңкесін теңшеуге арналған кірістірілген карта қосылған. Басқа ешбір күйге браузерлер қолдау көрсетпесе де, реттелетін мәнерлерді пайдаланатындар күрделірек пішін кері байланысын оңай қоса алады.valid
invalid
Біз миксинді $form-validation-states
өзгертпей мәндердіform-validation-state
теңшеуді ұсынбайтынымызды ескеріңіз .