Dearbhadh

Thoir seachad fios air ais luachmhor, gnìomhach don luchd-cleachdaidh agad le dearbhadh foirm HTML5, tro ghiùlan bunaiteach brabhsair no stoidhlichean àbhaisteach agus JavaScript.

Air an duilleig seo

Tha sinn mothachail nach eil na stoidhlichean dearbhaidh gnàthaichte agus molaidhean innealan taobh teachdaiche ruigsinneach, leis nach eil iad fosgailte do theicneòlasan taice. Fhad ‘s a bhios sinn ag obair air fuasgladh, mholamaid an dàrna cuid a bhith a’ cleachdadh an roghainn taobh an fhrithealaiche no am modh dearbhaidh brabhsair bunaiteach.

Mar a tha e ag obair

Seo mar a tha dearbhadh foirm ag obair le Bootstrap:

Bithear a’ dearbhadh foirm HTML tro dhà chlas-brèige CSS, :invalidagus :valid. Tha e a’ buntainn ri <input>, <select>, agus <textarea>eileamaidean.
Bidh Bootstrap a’ toirt sùil air na stoidhlichean :invalidagus na :validstoidhlichean gu clas pàrant .was-validated, mar as trice air an cur an sàs ann am faidhle <form>. Rud eile, tha raon riatanach sam bith gun luach a’ nochdadh mar neo-dhligheach air luchdachadh duilleag. San dòigh seo, faodaidh tu taghadh cuin a chuireas tu an gnìomh iad (mar as trice às deidh dhut foirm a chuir a-steach).
Gus coltas an fhoirm ath-shuidheachadh (mar eisimpleir, a thaobh tagraidhean foirm fiùghantach a’ cleachdadh AJAX), thoir air falbh a’ .was-validatedchlas bhon a- <form>rithist às deidh a chuir a-steach.
Mar chùl-raon, .is-invalidagus .is-validfaodar clasaichean a chleachdadh an àite nan clasaichean meallta airson dearbhadh taobh an fhrithealaiche . Chan fheum iad .was-validatedclas pàrant.
Air sgàth cuingealachaidhean air mar a tha CSS ag obair, chan urrainn dhuinn (an-dràsta) stoidhlichean a chuir an sàs ann an stoidhle <label>a thig ro smachd foirm san DOM gun chuideachadh bho JavaScript àbhaisteach.
Bidh a h-uile brobhsair ùr-nodha a’ toirt taic don API dearbhaidh cuingealachaidh , sreath de dhòighean JavaScript airson smachdan foirm a dhearbhadh.
Faodaidh teachdaireachdan fios-air-ais feum a dhèanamh de na roghainnean brobhsair (eadar-dhealaichte airson gach brobhsair, agus neo-sheasmhach tro CSS) no na stoidhlichean fios-air-ais àbhaisteach againn le HTML agus CSS a bharrachd.
Faodaidh tu teachdaireachdan dligheachd gnàthaichte a thoirt seachad setCustomValidityann an JavaScript.

Le sin san amharc, smaoinich air na demos a leanas airson na stoidhlichean dearbhaidh foirm àbhaisteach againn, clasaichean taobh an fhrithealaiche roghainneil, agus roghainnean brobhsair.

Stoidhlichean gnàthaichte

Airson teachdaireachdan dearbhaidh foirm Bootstrap àbhaisteach, feumaidh tu am novalidatefeart boolean a chur ris an fhaidhle <form>. Cuiridh seo à comas molaidhean inneal fios-air-ais bunaiteach a’ bhrobhsair, ach tha e fhathast a’ toirt cothrom air na APIan dearbhaidh foirm ann an JavaScript. Feuch an cuir thu a-steach am foirm gu h-ìosal; cuiridh an JavaScript againn stad air a’ phutan cuir a-steach agus cuiridh e fios air ais thugad. Nuair a dh'fheuchas tu ri cur a-steach, chì thu na stoidhlichean :invalidagus na :validstoidhlichean a chuirear an sàs ann an smachdan an fhoirm agad.

Bidh stoidhlichean fios-air-ais gnàthaichte a’ cur an sàs dathan àbhaisteach, crìochan, stoidhlichean fòcas, agus ìomhaighean cùl-fhiosrachaidh gus fios air ais a chonaltradh nas fheàrr. Chan fhaighear ìomhaighean cùl-fhiosrachaidh airson <select>s ach le .form-select, agus chan eil .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)
  })
})()

Roghainnean brabhsair

Gun ùidh agad ann am teachdaireachdan fios-air-ais dearbhaidh gnàthaichte no sgrìobhadh JavaScript gus giùlan cruth atharrachadh? Gu math, faodaidh tu na roghainnean brabhsair a chleachdadh. Feuch an cuir thu a-steach am foirm gu h-ìosal. A rèir do bhrobhsair agus OS, chì thu stoidhle fios air ais beagan eadar-dhealaichte.

Ged nach urrainnear na stoidhlichean fios-air-ais sin a stialladh le CSS, faodaidh tu fhathast an teacsa fios-air-ais a ghnàthachadh tro 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>

Taobh an fhrithealaiche

Tha sinn a’ moladh gun cleachd thu dearbhadh taobh teachdaiche, ach air eagal ‘s gu bheil feum agad air dearbhadh taobh an fhrithealaiche, faodaidh tu raointean foirm neo-dhligheach agus dligheach a chomharrachadh le .is-invalidagus .is-valid. Thoir an aire gu .invalid-feedbackbheil taic ris na clasaichean sin cuideachd.

Airson raointean neo-dhligheach, dèan cinnteach gu bheil am fios air ais / teachdaireachd mearachd neo-dhligheach co-cheangailte ris an raon foirm iomchaidh a’ cleachdadh aria-describedby(a ’toirt fa-near gu bheil am feart seo a’ ceadachadh iomradh a thoirt air barrachd air aon id, air eagal ‘s gu bheil an raon mar-thà a’ comharrachadh teacsa foirm a bharrachd).

Gus cùisean a rèiteachadh le radius crìche , feumaidh buidhnean cuir a-steach .has-validationclas a bharrachd.

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>

Feartan le taic

Tha stoidhlichean dearbhaidh rim faighinn airson na smachdan foirm agus na co-phàirtean a leanas:

<input>s agus <textarea>s le .form-control(a’ gabhail a-steach suas ri aon .form-controlann am buidhnean cuir a-steach)
<select>s le.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>

Molaidhean innealan

Ma cheadaicheas cruth an fhoirm agad e, faodaidh tu na .{valid|invalid}-feedbackclasaichean atharrachadh airson .{valid|invalid}-tooltipclasaichean gus fios air ais dearbhaidh a thaisbeanadh ann an inneal le stoidhle. Dèan cinnteach gu bheil pàrant position: relativeagad air airson suidheachadh inneal-togalaich. Anns an eisimpleir gu h-ìosal, tha seo aig na clasaichean colbh againn mu thràth, ach dh’ fhaodadh gum bi feum aig do phròiseact air suidheachadh eile.

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

Caochlaidhean

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

Measgachadh

Tha dà mheasgachadh air an cur còmhla, tron lùb againn , gus na stoidhlichean fios-air-ais dearbhaidh foirm againn a ghineadh.

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

Mapa

Is e seo am mapa dearbhaidh Sass bho _variables.scss. Cuir thairis no leudaich seo gus stàitean eadar-dhealaichte no a bharrachd a ghineadh.

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

Faodaidh trì paramadairean roghainneil a bhith ann am mapaichean $form-validation-statesgus faighinn thairis air molaidhean innealan agus stoidhlichean fòcas.

Lùb

B’ àbhaist dhuinn a bhith ag aithris thairis air $form-validation-statesluachan mapa gus na stoidhlichean dearbhaidh againn a ghineadh. Bidh atharrachaidhean sam bith air a’ mhapa Sass gu h-àrd ri fhaicinn anns an CSS a chuir thu ri chèile tron lùb seo.

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

Gnàthachadh

Faodar stàitean dearbhaidh a ghnàthachadh tro Sass leis a’ $form-validation-statesmhapa. Suidhichte san _variables.scssfhaidhle againn, is e am mapa Sass seo mar a ghineas sinn na stàitean bunaiteach valid/ invaliddearbhaidh. Air a ghabhail a-steach tha mapa neadachaidh airson dath, ìomhaigh, dath tip inneal agus sgàil fòcas gach stàite a ghnàthachadh. Ged nach eil stàitean sam bith eile a’ faighinn taic bho bhrobhsairean, faodaidh an fheadhainn a chleachdas stoidhlichean àbhaisteach fios air ais nas iom-fhillte a chuir ris gu furasta.