Bailíochtú

Tabhair aiseolas luachmhar inghníomhaithe do d'úsáideoirí le bailíochtú foirm HTML5, trí iompraíochtaí réamhshocraithe brabhsálaí nó trí stíleanna saincheaptha agus trí JavaScript.

Ar an leathanach seo

Is eol dúinn nach bhfuil na stíleanna bailíochtaithe saincheaptha ar thaobh an chliaint agus na leideanna uirlisí inrochtana faoi láthair, ós rud é nach bhfuil siad nochta do theicneolaíochtaí cúnta. Cé go n-oibrímid ar réiteach, molaimid an rogha ar thaobh an fhreastalaí nó an modh bailíochtaithe brabhsálaí réamhshocraithe a úsáid.

Conas a oibríonn sé

Seo mar a oibríonn bailíochtú foirmeacha le Bootstrap:

Cuirtear bailíochtú foirm HTML i bhfeidhm trí dhá rang bhréige CSS, :invalidagus :valid. Baineann sé le <input>, <select>, agus <textarea>eilimintí.
Déanann Bootstrap na stíleanna :invalidagus na stíleanna chuig an rang :validtuismitheora a scóip, a chuirtear i bhfeidhm go hiondúil ar an . Seachas sin, taispeánann aon réimse riachtanach gan luach go bhfuil sé neamhbhailí ar ualach an leathanaigh. Ar an mbealach seo, is féidir leat a roghnú cathain a ghníomhachtú iad (go hiondúil tar éis iarracht a dhéanamh an fhoirm a chur isteach)..was-validated<form>
Chun cuma na foirme a athshocrú (mar shampla, i gcás aighneachtaí foirme dinimiciúla ag baint úsáide as AJAX), bain an .was-validatedrang den rang <form>arís tar éis í a chur isteach.
Mar chúltaca, .is-invalidis .is-validféidir ranganna a úsáid in ionad na bréige-ranganna le haghaidh bailíochtaithe ar thaobh an fhreastalaí . Níl .was-validatedrang tuismitheora ag teastáil uathu.
Mar gheall ar shrianta ar an gcaoi a n-oibríonn CSS, ní féidir linn (faoi láthair) stíleanna a chur i bhfeidhm ar <label>fhoirm a thagann roimh rialú foirme sa DOM gan cabhair ó JavaScript saincheaptha.
Tacaíonn gach brabhsálaí nua-aimseartha leis an API bailíochtaithe srianta , sraith de mhodhanna JavaScript chun rialuithe foirmeacha a bhailíochtú.
Féadfaidh teachtaireachtaí aiseolais úsáid a bhaint as réamhshocruithe an bhrabhsálaí (difriúil do gach brabhsálaí, agus neamhshonraithe trí CSS) nó ár stíleanna aiseolais saincheaptha le HTML agus CSS breise.
Is féidir leat teachtaireachtaí saincheaptha bailíochta a sholáthar setCustomValidityi JavaScript.

Agus é sin san áireamh, smaoinigh ar na taispeántais seo a leanas dár stíleanna bailíochtaithe foirmeacha saincheaptha, ranganna roghnacha ar thaobh an fhreastalaí, agus mainneachtainí brabhsálaí.

Stíleanna saincheaptha

Le haghaidh teachtaireachtaí bailíochtaithe foirme Bootstrap saincheaptha, beidh ort an novalidateaitreabúid Boole a chur le do <form>. Díchumasaíonn sé seo leideanna uirlisí aiseolais réamhshocraithe an bhrabhsálaí, ach soláthraíonn sé rochtain fós ar na APIanna bailíochtaithe foirmeacha i JavaScript. Déan iarracht an fhoirm thíos a chur isteach; Idircheapfaidh ár JavaScript an cnaipe cuir isteach agus seolfaidh sé aiseolas chugat. Agus tú ag iarraidh cur isteach, feicfidh tú na stíleanna :invalidagus na :validstíleanna a chuirtear i bhfeidhm ar rialuithe d'fhoirme.

Cuireann stíleanna aiseolais saincheaptha dathanna saincheaptha, teorainneacha, stíleanna fócais agus deilbhíní cúlra i bhfeidhm chun aiseolas a chur in iúl níos fearr. Níl deilbhíní cúlra le haghaidh <select>s ar fáil ach le .form-select, agus ní .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)
    })
})()

Réamhshocruithe brabhsálaí

Nach bhfuil suim agat i dteachtaireachtaí aiseolais bailíochtaithe saincheaptha nó i scríobh JavaScript chun iompraíochtaí foirm a athrú? Gach go maith, is féidir leat úsáid a bhaint as an bhrabhsálaí réamhshocraithe. Déan iarracht an fhoirm thíos a chur isteach. Ag brath ar do bhrabhsálaí agus OS, feicfidh tú stíl aiseolais atá beagán difriúil.

Cé nach féidir na stíleanna aiseolais seo a stíliú le CSS, is féidir leat an téacs aiseolais a shaincheapadh fós trí 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>

Taobh an fhreastalaí

Molaimid bailíochtú taobh an chliaint a úsáid, ach ar eagla go dteastaíonn bailíochtú ar thaobh an fhreastalaí uait, is féidir leat réimsí foirme neamhbhailí agus bailí a chur in iúl le .is-invalidagus .is-valid. Tabhair faoi deara go .invalid-feedbackdtacaítear leis na ranganna seo freisin.

Maidir le réimsí neamhbhailí, cinntigh go bhfuil baint ag an aischothú/teachtaireacht earráide neamhbhailí leis an réimse foirme ábhartha ag baint úsáide as aria-describedby(ag tabhairt faoi deara go gceadaíonn an tréith seo níos mó ná ceann amháin ida thagairt, ar eagla go díríonn an réimse ar théacs foirme breise cheana féin).

Chun fadhbanna a réiteach le gathanna teorann.has-validation , teastaíonn rang breise ó ghrúpaí ionchuir .

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

Eilimintí tacaithe

Tá stíleanna bailíochtaithe ar fáil do na rialuithe foirme agus na gcomhpháirteanna seo a leanas:

<input>s agus <textarea>s le .form-control(lena n-áirítear suas le duine amháin .form-controli ngrúpaí ionchuir)
<select>s le.form-select
.form-checks

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

Leideanna uirlisí

Má cheadaíonn leagan amach d’fhoirme é, is féidir leat na ranganna a mhalartú le .{valid|invalid}-feedbackhaghaidh .{valid|invalid}-tooltipranganna chun aiseolas bailíochtaithe a thaispeáint i leid uirlisí stílithe. Bí cinnte go bhfuil tuismitheoir in éineacht leis chun leideanna position: relativeuirlisí a aimsiú. Sa sampla thíos, tá sé seo ag ár ranganna colún cheana féin, ach d'fhéadfadh go mbeadh socrú eile ag teastáil ó do thionscadal.

<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

Athróga

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

Meascáin

Cuirtear dhá mheascán le chéile, tríd ár lúb , chun ár stíleanna aiseolais um bhailíochtú foirmeacha a ghiniúint.

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

Léarscáil

Seo é an léarscáil bailíochtaithe Sass ó _variables.scss. Déan é seo a shárú nó a leathnú chun stáit éagsúla nó breise a ghiniúint.

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

Is féidir trí pharaiméadar roghnacha a bheith ar léarscáileanna $form-validation-stateschun leideanna uirlisí agus stíleanna fócasaithe a shárú.

Lúb

Úsáidtear é chun $form-validation-statesluachanna léarscáile a athrá chun ár stíleanna bailíochtaithe a ghiniúint. Léireofar aon athruithe ar an léarscáil Sass thuas i do CSS tiomsaithe tríd an lúb seo.

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

Saincheapadh

Is féidir stáit bhailíochtaithe a shaincheapadh trí Sass leis an $form-validation-statesléarscáil. Lonnaithe inár gcomhad, is é an léarscáil Sass seo an chaoi a ndéanaimid na stáit réamhshocraithe / bailíochtaithe _variables.scssa ghiniúint . San áireamh tá léarscáil neadaithe chun dath, deilbhín, dath leideanna uirlisí agus scáth fócais gach stáit a shaincheapadh. Cé nach dtacaíonn brabhsálaithe le stát ar bith eile, is féidir leo siúd a úsáideann stíleanna saincheaptha aiseolas foirmeacha níos casta a chur leo go héasca.validinvalid

Tabhair faoi deara le do thoil nach molaimid $form-validation-statesluachanna a shaincheapadh gan an form-validation-statemixin a mhodhnú freisin .