Ifọwọsi

Pese awọn esi ti o niyelori, ṣiṣe iṣe si awọn olumulo rẹ pẹlu afọwọsi fọọmu HTML5, nipasẹ awọn ihuwasi aiyipada aṣawakiri tabi awọn aṣa aṣa ati JavaScript.

Lori iwe yi

A mọ pe lọwọlọwọ awọn aṣa afọwọsi aṣa ẹgbẹ alabara ati awọn imọran irinṣẹ ko wa, nitori wọn ko farahan si awọn imọ-ẹrọ iranlọwọ. Lakoko ti a n ṣiṣẹ lori ojutu kan, a yoo ṣeduro boya lilo aṣayan ẹgbẹ olupin tabi ọna afọwọsi aṣawakiri aiyipada.

Bawo ni o ṣe n ṣiṣẹ

Eyi ni bii afọwọsi fọọmu ṣiṣẹ pẹlu Bootstrap:

Afọwọsi fọọmu HTML jẹ lilo nipasẹ awọn kilasi afarape meji ti CSS, :invalidati :valid. O kan si <input>, <select>, ati <textarea>awọn eroja.
Bootstrap dopin :invalidati :validawọn aza si kilasi obi .was-validated, nigbagbogbo loo si <form>. Bibẹẹkọ, eyikeyi aaye ti a beere laisi iye kan fihan bi aifẹ lori fifuye oju-iwe. Ni ọna yii, o le yan igba lati mu wọn ṣiṣẹ (paapaa lẹhin igbidanwo ifakalẹ fọọmu).
Lati tun irisi fọọmu naa tunto (fun apẹẹrẹ, ninu ọran ti awọn ifisilẹ fọọmu ti o ni agbara nipa lilo AJAX), yọ .was-validatedkilasi kuro <form>lẹẹkansi lẹhin ifakalẹ.
Gẹgẹbi ipadasẹhin, .is-invalidati .is-validawọn kilasi le ṣee lo dipo awọn kilasi afarape fun afọwọsi ẹgbẹ olupin . Wọn ko nilo .was-validatedkilasi obi kan.
Nitori awọn idiwọ ni bii CSS ṣe n ṣiṣẹ, a ko le (ni lọwọlọwọ) lo awọn aṣa si <label>eyiti o wa ṣaaju iṣakoso fọọmu ni DOM laisi iranlọwọ ti JavaScript aṣa.
Gbogbo awọn aṣawakiri ode oni ṣe atilẹyin API afọwọsi idilọwọ , lẹsẹsẹ awọn ọna JavaScript fun imudari awọn iṣakoso fọọmu.
Awọn ifiranšẹ esi le lo awọn aṣiṣe aṣawakiri (yatọ fun ẹrọ aṣawakiri kọọkan, ati aiṣedeede nipasẹ CSS) tabi awọn aza esi ti aṣa wa pẹlu HTML afikun ati CSS.
O le pese awọn ifiranṣẹ ifọwọsi aṣa pẹlu setCustomValidityni JavaScript.

Pẹlu iyẹn ni lokan, ṣe akiyesi awọn demos wọnyi fun awọn aza afọwọsi fọọmu aṣa wa, awọn kilasi ẹgbẹ olupin yiyan, ati awọn aseku aṣawakiri.

Awọn aṣa aṣa

Fun awọn ifiranse fọọmu Bootstrap aṣa, iwọ yoo nilo lati ṣafikun novalidateabuda boolean si faili rẹ <form>. Eyi mu awọn imọran irinṣẹ esi aiyipada ẹrọ aṣawakiri ṣiṣẹ, ṣugbọn tun pese iraye si awọn API afọwọsi fọọmu ni JavaScript. Gbiyanju lati fi awọn fọọmu ni isalẹ; JavaScript wa yoo ṣe idiwọ bọtini ifisilẹ ati yi awọn esi pada si ọ. Nigbati o ba n gbiyanju lati fi silẹ, iwọ yoo rii :invalidati :validawọn aṣa ti a lo si awọn iṣakoso fọọmu rẹ.

Awọn ara esi ti aṣa lo awọn awọ aṣa, awọn aala, awọn aza idojukọ, ati awọn aami abẹlẹ lati ṣe ibasọrọ dara si awọn esi. Awọn aami abẹlẹ fun <select>s wa pẹlu .form-select, kii ṣe .form-control.

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)
  })
})()

Awọn aṣiṣe aṣawakiri

Ko nifẹ si awọn ifiranṣẹ esi afọwọsi aṣa tabi kikọ JavaScript lati yi awọn ihuwasi fọọmu pada? O dara, o le lo awọn aṣiṣe aṣawakiri. Gbiyanju lati firanṣẹ fọọmu ni isalẹ. Da lori ẹrọ aṣawakiri rẹ ati OS, iwọ yoo rii ara esi ti o yatọ diẹ diẹ.

Lakoko ti awọn aza esi wọnyi ko le ṣe aṣa pẹlu CSS, o tun le ṣe akanṣe ọrọ esi nipasẹ 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>

Ẹgbẹ olupin

A ṣeduro lilo afọwọsi-ẹgbẹ alabara, ṣugbọn ti o ba nilo afọwọsi ẹgbẹ olupin, o le tọkasi aiṣedeede ati awọn aaye fọọmu to wulo pẹlu .is-invalidati.is-valid . Ṣe akiyesi pe .invalid-feedbacko tun ṣe atilẹyin pẹlu awọn kilasi wọnyi.

Fun awọn aaye ti ko tọ, rii daju pe esi ti ko tọ/ ifiranṣẹ aṣiṣe ni nkan ṣe pẹlu aaye fọọmu ti o yẹ ni liloaria-describedby (ṣakiyesi pe ẹda yii ngbanilaaye diẹ sii ju ọkan idlọ lati tọka, ti aaye naa ba ti tọka si ọrọ fọọmu afikun).

Lati ṣatunṣe awọn ọran pẹlu rediosi aala , awọn ẹgbẹ titẹ sii nilo kilasi afikun .has-validation.

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>

Awọn eroja atilẹyin

Awọn ara afọwọsi wa fun awọn iṣakoso fọọmu atẹle ati awọn paati:

<input>s ati <textarea>s pẹlu .form-control(pẹlu to ọkan .form-controlninu awọn ẹgbẹ titẹ sii)
<select>s pẹlu.form-select
.form-checks

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>

Awọn imọran irinṣẹ

Ti iṣeto fọọmu rẹ ba gba laaye, o le paarọ awọn .{valid|invalid}-feedbackkilasi fun .{valid|invalid}-tooltipawọn kilasi lati ṣe afihan awọn esi afọwọsi ni ilana irinṣẹ ara. Rii daju pe o ni obi pẹlu position: relativelori rẹ fun ipo ohun elo. Ni apẹẹrẹ ni isalẹ, awọn kilasi ọwọn wa ti ni eyi tẹlẹ, ṣugbọn iṣẹ akanṣe rẹ le nilo iṣeto yiyan.

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

Awọn oniyipada

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

Mixins

Awọn apopọ meji ni idapo papọ, nipasẹ lupu wa , lati ṣe agbekalẹ awọn aza esi afọwọsi fọọmu wa.

@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;
        }
      }
    }
  }
}

Maapu

Eyi ni maapu Sass afọwọsi lati _variables.scss. Pari tabi fa eyi pọ si lati ṣe ipilẹṣẹ oriṣiriṣi tabi awọn ipinlẹ afikun.

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

Awọn maapu ti$form-validation-states le ni awọn paramita iyan mẹta lati bori awọn imọran irinṣẹ ati awọn aza idojukọ.

Loop

Ti a lo lati ṣe iwọn lori $form-validation-statesawọn iye maapu lati ṣe agbekalẹ awọn aza afọwọsi wa. Eyikeyi awọn iyipada si maapu Sass ti o wa loke yoo han ninu CSS ti o ṣajọ nipasẹ yipo yii.

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

Isọdi ara ẹni

Awọn ipinlẹ afọwọsi le jẹ adani nipasẹ Sass pẹlu $form-validation-statesmaapu naa. Ti o wa ninu _variables.scssfaili wa, maapu Sass yii ni bii a ṣe n ṣe ipilẹṣẹ aiyipada valid/ invalidawọn ipinlẹ afọwọsi. To wa ni maapu oni ite kan fun isọdi awọ ara ilu kọọkan, aami, awọ ọpa irinṣẹ, ati ojiji idojukọ. Lakoko ti ko si awọn ipinlẹ miiran ti o ṣe atilẹyin nipasẹ awọn aṣawakiri, awọn ti nlo awọn aṣa aṣa le ṣafikun awọn abajade fọọmu eka diẹ sii ni irọrun.