Ku tiyisisiwa ka swilo
Nyika vuyelo bya nkoka, lebyi nga tekiwaka goza eka vatirhisi va wena hi ku tiyisisiwa ka fomo ya HTML5, hi ku tirhisa mahanyelo ya xiviri ya xihlamusela-marito kumbe switayele swa ntolovelo na JavaScript.
Ndlela leyi swi tirhaka ha yona
Hi leyi ndlela leyi ku tiyisisiwa ka fomo ku tirhaka ha yona hi Bootstrap:
- Ku tiyisisiwa ka fomo ya HTML ku tirhisiwa hi ku tirhisa titlilasi timbirhi ta vuxisi ta CSS,
:invalid
na:valid
. Yi tirha eka<input>
,<select>
, na<textarea>
swiaki. - Bootstrap yi hlanganisa switayele swa
:invalid
na:valid
eka tlilasi ya mutswari.was-validated
, hi ntolovelo swi tirhisiwa eka<form>
. Handle ka sweswo, nsimu yihi na yihi leyi lavekaka leyi nga riki na ntikelo yi kombisa tanihi leyi nga tirhiki eka ku layicha pheji. Hi ndlela leyi, u nga ha hlawula leswaku u ta ti tirhisa rini (hi ntolovelo endzhaku ka loko ku ringetiwile ku rhumela fomo). - Ku tlhela u veka xivumbeko xa fomo (xikombiso, eka xiyimo xa ku rhumeriwa ka fomo leyi cinca-cincaka hi ku tirhisa AJAX), susa
.was-validated
tlilasi eka<form>
nakambe endzhaku ko rhumela. - Tanihi fallback,
.is-invalid
naswona.is-valid
titlilasi ti nga tirhisiwa ematshan’wini ya titlilasi ta vuxisi ta ku tiyisisiwa ka tlhelo ra sevha . A va lavi.was-validated
tlilasi ya mutswari. - Hikwalaho ka swipimelo eka ndlela leyi CSS yi tirhaka ha yona, a hi nge (sweswi) tirhisa switayele eka a
<label>
leyi taka emahlweni ka vulawuri bya fomo eka DOM handle ko pfuniwa hi JavaScript ya ntolovelo. - Swihlamusela-marito hinkwaswo swa manguva lawa swi seketela API ya ku tiyisisa swipimelo , nxaxamelo wa tindlela ta JavaScript to tiyisisa vulawuri bya fomo.
- Mahungu ya vuyelo ma nga ha tirhisa swilo leswi nga riki swa xiviri swa xihlamusela-marito (leswi hambaneke eka xihlamusela-marito xin’wana ni xin’wana, naswona swi nga cinciwi hi ku tirhisa CSS) kumbe switayele swa hina swa vuyelo lebyi endleriweke hi ku tirhisa HTML ni CSS leyi engetelekeke.
- U nga ha nyika marungula ya ntiyiso ya ntolovelo na
setCustomValidity
eka JavaScript.
Hi ku tsundzuka sweswo, xiya ti-demo leti landzelaka ta switayele swa hina swa ku tiyisisiwa ka fomo ya ntolovelo, titlilasi ta le tlhelo ra sevha leti nga hlawuriwa, ni swilo leswi nga riki swa xiviri swa xihlamusela-marito.
Switayili swa ntolovelo
Eka marungula ya ku tiyisisa fomo ya Bootstrap ya ntolovelo, u ta lava ku engetela novalidate
xihlawulekisi xa boolean eka <form>
. Leswi swi tshikisa switsundzuxo swa vuyelo bya xiviri bya xihlamusela-marito, kambe swa ha nyika mfikelelo eka ti-API ta ku tiyisisa fomo eka JavaScript. Ringeta ku rhumela fomo leyi nga laha hansi; JavaScript ya hina yi ta kavanyeta buti yo rhumela ivi yi ku hundzisela vuxokoxoko. Loko u ringeta ku rhumela, u ta vona :invalid
na :valid
switayele swi tirhisiwa eka vulawuri bya wena bya fomo.
Switayili swa mbuyelo wa ntolovelo swi tirhisa mihlovo ya ntolovelo, mindzilakano, switayele swa ku kongomisa, na swifaniso swa le ndzhaku ku hlanganisa mbuyelo ku antswa. Swifaniso swa le ndzhaku swa <select>
s swi kumeka ntsena hi .form-select
, naswona a hi .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)
})
})()
Swivumbeko swa xihlamusela-marito
A wu tsakeli marungula ya vuyelo bya ku tiyisisiwa ka ntolovelo kumbe ku tsala JavaScript ku cinca mahanyelo ya fomo? Hinkwaswo swi kahle, u nga tirhisa ti-default ta browser. Ringeta ku rhumela fomo leyi nga laha hansi. Ku ya hi browser ya wena na OS, u ta vona xitayili lexi hambaneke nyana xa vuxokoxoko.
Loko switayele leswi swa mbuyelo swi nga ta ka swi nga endliwi xitayili hi CSS, wa ha kota ku lulamisa tsalwa ra mbuyelo hi ku tirhisa 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>
Xiphemu xa sevha
Hi ringanyeta ku tirhisa ku tiyisisiwa ka tlhelo ra xilayenti, kambe loko ko tshuka ku ri leswaku u lava ku tiyisisiwa ka tlhelo ra sevha, u nga kombisa tinsimu ta fomo leti nga tirhiki ni leti tirhaka hi .is-invalid
na .is-valid
. Xiya leswaku .invalid-feedback
na swona swi seketeriwa hi titlilasi leti.
Eka tinsimu leti nga tirhiki, tiyisisa leswaku rungula ra mbuyelo/xihoxo leri nga tirhiki ri fambelanisiwa na nsimu ya fomo leyi faneleke hi ku tirhisa aria-describedby
(xiya leswaku xihlawulekisi lexi xi pfumelela ku tlula yin’we id
ku kongomisiwa, loko ku ri leswaku nsimu se yi kombetela eka tsalwa ra fomo yo engetela).
Ku lulamisa timhaka ta border radii.has-validation
, mintlawa ya swingheniso yi lava tlilasi yo engetela .
<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>
Swiaki leswi seketeriwaka
Switayili swa ku tiyisisa swa kumeka eka vulawuri bya fomo na swiphemu leswi landzelaka:
<input>
s na<textarea>
s na.form-control
(ku katsa ku fika eka yin’we.form-control
eka mintlawa ya swingheniso) .<select>
s na.form-select
.form-check
s
<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>
Switsundzuxo swa Switirhisiwa
Loko xivumbeko xa wena xa fomo xi swi pfumelela, u nga cincana .{valid|invalid}-feedback
titlilasi hi .{valid|invalid}-tooltip
titlilasi ku kombisa mbuyelo wa ku tiyisisa eka xitsundzuxo xa xitirhisiwa lexi nga na xitayili. Tiyisisa leswaku u na mutswari loyi a nga na position: relative
yena eka tooltip positioning. Eka xikombiso lexi nga laha hansi, titlilasi ta hina ta tikholomu se ti na leswi, kambe phurojeke ya wena yi nga ha lava ku lulamisiwa kun’wana.
<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>
Sass
Swilo leswi cinca-cincaka
$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>");
Ti- mixins
Ti mixins timbirhi ti hlanganisiwa swin’we, hi ku tirhisa loop ya hina , ku tumbuluxa switayele swa hina swa mbuyelo wa ku tiyisisa fomo.
@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;
}
}
}
}
Mepe
Leyi i mepe wa Sass wa ku tiyisisa ku suka eka _variables.scss
. Tlula kumbe ku andlala leswi ku tumbuluxa swiyimo swo hambana kumbe swo engetela.
$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
)
);
Mimepe ya $form-validation-states
yi nga va na tipharamitha tinharhu to hlawula ku tlula switsundzuxo swa switirhisiwa na switayele swo kongomisa.
Xintambyana
Ku tirhisiwa ku phindha-phindha ehenhla ka $form-validation-states
mimpimo ya mepe ku humesa switayele swa hina swa ku tiyisisa. Ku cinca kwihi na kwihi eka mepe wa Sass lowu nga laha henhla ku ta kombisiwa eka CSS ya wena leyi hlengeletiweke hi ku tirhisa xirhendzevutana lexi.
@each $state, $data in $form-validation-states {
@include form-validation-state($state, $data...);
}
Ku endla swilo hi ku landza swilaveko swa wena
Swiyimo swa ku tiyisisa swi nga endliwa hi ku tirhisa Sass hi $form-validation-states
mepe. Yi kumeka eka fayili ya hina _variables.scss
, mepe lowu wa Sass i ndlela leyi hi tumbuluxaka swiyimo swa default valid
/ invalid
validation. Ku katsiwile mepe lowu pfanganisiweke wa ku cinca muvala wa xiyimo xin’wana ni xin’wana, xifaniso, muvala wa xitsundzuxo xa xitirhisiwa ni ndzhuti wa ku kongomisa. Hambileswi ku nga riki na swifundzha swin’wana leswi seketeriwaka hi swihlamusela-marito, lava tirhisaka switayele swa ntolovelo va nga engetela hi ku olova vuyelo bya fomo lebyi rharhanganeke swinene.
Hi kombela u xiya leswaku a hi bumabumeli ku cinca $form-validation-states
mimpimo handle ko tlhela u cinca form-validation-state
mixin .