Pereiti prie pagrindinio turinio Pereiti prie dokumentų naršymo
Check
in English

Patvirtinimas

Patvirtinkite HTML5 formą, naudodami numatytuosius naršyklės veiksmus arba tinkintus stilius ir JavaScript.

Šiame puslapyje
Žinome, kad šiuo metu kliento pasirinktiniai patvirtinimo stiliai ir patarimai nepasiekiami, nes jie nėra veikiami pagalbinių technologijų. Kol dirbame su sprendimu, rekomenduojame naudoti serverio parinktį arba numatytąjį naršyklės patvirtinimo metodą.

Kaip tai veikia

Štai kaip formos patvirtinimas veikia naudojant Bootstrap:

  • HTML formos patvirtinimas taikomas naudojant dvi CSS pseudoklases :invalidir :valid. Tai taikoma <input>, <select>, ir <textarea>elementams.
  • Bootstrap aprėpia :invalidir :validstilius pirminei .was-validatedklasei, paprastai taikomai <form>. Kitu atveju bet koks privalomas laukas be reikšmės įkeliant puslapį bus rodomas kaip negaliojantis. Tokiu būdu galite pasirinkti, kada juos suaktyvinti (paprastai po to, kai bandoma pateikti formą).
  • Norėdami iš naujo nustatyti formos išvaizdą (pvz., dinaminės formos pateikimo naudojant AJAX), po pateikimo dar kartą pašalinkite .was-validatedklasę iš .<form>
  • Kaip atsarginis variantas, .is-invalidir .is-validklasės gali būti naudojamos vietoj pseudoklasių serverio patvirtinimui . Jiems nereikia .was-validatedtėvų klasės.
  • Dėl CSS veikimo apribojimų negalime (šiuo metu) taikyti stilių, <label>kurie yra prieš formos valdiklį DOM be tinkintos JavaScript pagalbos.
  • Visos šiuolaikinės naršyklės palaiko apribojimų patvirtinimo API – „JavaScript“ metodų, skirtų formos valdikliams patvirtinti, seriją.
  • Atsiliepimų pranešimuose gali būti naudojami numatytieji naršyklės nustatymai (skirtingi kiekvienoje naršyklėje ir nekeičiami naudojant CSS) arba mūsų pasirinktiniai atsiliepimų stiliai su papildomu HTML ir CSS.
  • Galite pateikti tinkintus galiojimo pranešimus naudodami setCustomValidity„JavaScript“.

Turėdami tai omenyje, apsvarstykite toliau pateiktas demonstracines versijas, skirtas mūsų pasirinktinių formų patvirtinimo stiliams, pasirenkamoms serverio pusės klasėms ir naršyklės numatytiesiems parametrams.

Individualūs stiliai

Norėdami gauti tinkintus Bootstrap formos patvirtinimo pranešimus, turėsite pridėti novalidateloginį atributą prie savo <form>. Tai išjungia numatytuosius naršyklės atsiliepimų patarimus, bet vis tiek suteikia prieigą prie „JavaScript“ formos patvirtinimo API. Pabandykite pateikti žemiau esančią formą; mūsų „JavaScript“ perims pateikimo mygtuką ir perduos jums atsiliepimą. Bandydami pateikti, matysite formos valdikliams pritaikytus stilius :invalidir .:valid

Pasirinktiniai atsiliepimų stiliai taiko pasirinktines spalvas, rėmelius, fokusavimo stilius ir fono piktogramas, kad būtų galima geriau perduoti atsiliepimus. s fono piktogramos <select>galimos tik su .form-select, bet ne .form-control.

Atrodo gerai!
Atrodo gerai!
@
Pasirinkite vartotojo vardą.
Nurodykite galiojantį miestą.
Pasirinkite tinkamą būseną.
Pateikite galiojantį pašto kodą.
Prieš pateikdami turite sutikti.
html 
<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
(() => {
  'use strict'

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  const forms = document.querySelectorAll('.needs-validation')

  // Loop over them and prevent submission
  Array.from(forms).forEach(form => {
    form.addEventListener('submit', event => {
      if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
      }

      form.classList.add('was-validated')
    }, false)
  })
})()

Numatytieji naršyklės nustatymai

Nedomina pasirinktiniai patvirtinimo grįžtamojo ryšio pranešimai arba „JavaScript“ rašymas, kad pakeistumėte formos elgseną? Viskas gerai, galite naudoti numatytuosius naršyklės nustatymus. Pabandykite pateikti žemiau esančią formą. Atsižvelgiant į naršyklę ir OS, matysite šiek tiek kitokį atsiliepimų stilių.

Nors šių atsiliepimų stilių negalima sukurti naudojant CSS, vis tiek galite tinkinti atsiliepimo tekstą naudodami „JavaScript“.

@
html 
<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>

Serverio pusė

Rekomenduojame naudoti kliento pusės patvirtinimą, bet jei reikia serverio patvirtinimo, netinkamus ir galiojančius formos laukus galite nurodyti naudodami .is-invalidir .is-valid. Atminkite, kad .invalid-feedbacktai taip pat palaikoma šiose klasėse.

Netinkamų laukų atveju įsitikinkite, kad netinkamas atsiliepimo / klaidos pranešimas yra susietas su atitinkamu formos lauku aria-describedby(atminkite, kad šis atributas leidžia idnurodyti daugiau nei vieną, jei laukas jau nurodo papildomą formos tekstą).

Norint išspręsti kraštinės spindulio problemas , įvesties grupėms reikia papildomos .has-validationklasės.

Atrodo gerai!
Atrodo gerai!
@
Pasirinkite vartotojo vardą.
Nurodykite galiojantį miestą.
Pasirinkite tinkamą būseną.
Pateikite galiojantį pašto kodą.
Prieš pateikdami turite sutikti.
html 
<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>

Palaikomi elementai

Galimi šių formų valdiklių ir komponentų patvirtinimo stiliai:

  • <input>s ir <textarea>s su .form-control(įskaitant iki vieno .form-controlįvesties grupėse)
  • <select>s su.form-select
  • .form-checks
Į teksto sritį įveskite pranešimą.
Netinkamo atsiliepimo teksto pavyzdys
Daugiau netinkamo atsiliepimo teksto pavyzdžių
Netinkamo pasirinkimo atsiliepimo pavyzdys
Neteisingo formos failo atsiliepimo pavyzdys
html 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea" class="form-label">Textarea</label>
    <textarea class="form-control" 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>

Patarimai

Jei formos išdėstymas tai leidžia, galite sukeisti .{valid|invalid}-feedbackklases į .{valid|invalid}-tooltipklases, kad pateiktumėte patvirtinimo atsiliepimą stiliaus patarime. Būtinai turėkite vieną iš tėvų position: relative, kad galėtų nustatyti patarimo vietą. Toliau pateiktame pavyzdyje mūsų stulpelių klasėse tai jau yra, tačiau jūsų projektui gali prireikti kitos sąrankos.

Atrodo gerai!
Atrodo gerai!
@
Pasirinkite unikalų ir galiojantį vartotojo vardą.
Nurodykite galiojantį miestą.
Pasirinkite tinkamą būseną.
Pateikite galiojantį pašto kodą.
html 
<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

Kintamieji

$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.73.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>");

Mišiniai

Du mišiniai sujungiami per mūsų kilpą , kad būtų sukurti formų patvirtinimo grįžtamojo ryšio stiliai.

@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-control-color {
    @include form-validation-state-selector($state) {
      @if $enable-validation-icons {
        width: add($form-color-width, $input-height-inner);
      }
    }
  }

  .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:not(:focus),
    > .form-select:not(:focus),
    > .form-floating:not(:focus-within) {
      @include form-validation-state-selector($state) {
        @if $state == "valid" {
          z-index: 3;
        } @else if $state == "invalid" {
          z-index: 4;
        }
      }
    }
  }
}

Žemėlapis

Tai patvirtinimo Sass žemėlapis iš _variables.scss. Nepaisykite arba išplėskite tai, kad būtų sukurtos kitos ar papildomos būsenos.

$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
  )
);

Žemėlapiuose $form-validation-statesgali būti trys pasirenkami parametrai, skirti nepaisyti įrankių patarimų ir fokusavimo stilių.

Kilpa

Naudojamas kartoti $form-validation-statesžemėlapio vertes, kad būtų generuojami patvirtinimo stiliai. Bet kokie anksčiau pateikto Sass žemėlapio pakeitimai atsispindės jūsų sudarytame CSS naudojant šią kilpą.

@each $state, $data in $form-validation-states {
  @include form-validation-state($state, $data...);
}

Tinkinimas

Patvirtinimo būsenas galima tinkinti naudojant Sass su $form-validation-statesžemėlapiu. Šis mūsų _variables.scssfaile esantis Sass žemėlapis yra tai, kaip generuojame numatytąsias valid/ invalidpatvirtinimo būsenas. Pridedamas įdėtas žemėlapis, skirtas tinkinti kiekvienos būsenos spalvą, piktogramą, patarimo spalvą ir fokusavimo šešėlį. Nors naršyklės nepalaiko jokių kitų būsenų, naudojantys pasirinktinius stilius gali lengvai pridėti sudėtingesnių formų atsiliepimų.