Panangipaneknek

Mangted ti napateg, maaramid a sungbat kadagiti agar-aramatmo babaen ti panangipaneknek ti porma ti HTML5, babaen dagiti default a kababalin ti browser wenno dagiti kostumbre nga estilo ken JavaScript.

Iti daytoy a panid

Ammomi nga iti agdama dagiti estilo ti panangipaneknek ti kostumbre ken dagiti toltip ti dasig ti kliyente ket saan a mabalin a mastrek, gapu ta dagitoy ket saan a naipalgak kadagiti makatulong a teknolohia. Bayat nga agtartrabahokami iti solusion, irekomendarmi ti panagusar iti server-side a pagpilian wenno ti default a pamay-an ti panangipaneknek ti browser.

No kasano ti panagandar dayta

Kastoy ti panagandar ti panangipaneknek ti porma iti Bootstrap:

Ti panangipaneknek ti porma ti HTML ket maipakat babaen ti dua a pseudo-klase ti CSS, :invalidken :valid. Agaplikar dayta kadagiti <input>, <select>, ken <textarea>dagiti elemento.
Ti Bootstrap :invalidket mangsaklaw kadagiti estilo ti ken iti klase :validti nagannak .was-validated, a kadawyan a maipakat iti <form>. No saan, ti ania man a kasapulan a tay-ak nga awan ti pateg ket agparang a kas saan nga umiso iti panagkarga ti panid. Iti daytoy a wagas, mabalinmo a pilien no kaano nga aktiboen dagitoy (kadawyan kalpasan a mapadas ti panagipatulod ti porma).
Tapno mai-reset ti langa ti porma (kas pagarigan, iti kaso dagiti dinamiko a panagipatulod ti porma babaen ti panagusar ti AJAX), ikkaten ti .was-validatedklase manipud iti <form>manen kalpasan ti panagipatulod.
Kas maysa a fallback, .is-invalidken .is-validdagiti klase ket mabalin a mausar imbes a dagiti pseudo-klase para iti panangipaneknek ti sikigan ti serbidor . Saanda a kasapulan ti .was-validatedklase dagiti nagannak.
Gapu kadagiti pannakalapped no kasano ti panagtrabaho ti CSS, saanmi a mabalin (iti agdama) nga iyaplikar dagiti estilo iti maysa <label>nga umay sakbay ti maysa a panagtengngel ti porma iti DOM no awan ti tulong ti kostumbre a JavaScript.
Amin a moderno a browser ket mangsuporta ti API ti panangipaneknek ti limitasion , ti serye dagiti pamay-an ti JavaScript para iti panangipaneknek kadagiti kontrol ti porma.
Dagiti mensahe ti feedback ket mabalin nga agusar kadagiti default ti browser (naiduma para iti tunggal maysa a browser, ken saan nga estilo babaen ti CSS) wenno dagiti kostumbre nga estilo ti feedbackmi nga addaan kadagiti kanayonan nga HTML ken CSS.
Mabalinmo ti mangipaay kadagiti kostumbre a mensahe ti kinapudno nga addaan setCustomValidityiti JavaScript.

Iti dayta a panunot, ibilang dagiti sumaganad a demo para kadagiti kostumbre nga estilo ti panangipaneknekmi iti porma, dagiti opsional a klase ti server-side, ken dagiti default ti browser.

Dagiti kostumbre nga estilo

Para kadagiti kostumbre a mensahe ti panangipaneknek ti porma ti Bootstrap, kasapulam nga inayon ti novalidateboolean a kababalin iti <form>. Daytoy ket mangbaldado kadagiti default a toltip ti feedback ti browser, ngem mangipaay pay laeng ti panagserrek kadagiti API ti panangipaneknek ti porma iti JavaScript. Padasem nga isubmit ti porma iti baba; ti JavaScript-mi ket mang-intercept iti submit button ken mangi-relay iti feedback kenka. No padasem ti mangisubmitir, makitam dagiti :invalidken :validestilo a naipakat kadagiti kontrol ti pormam.

Dagiti kostumbre nga estilo ti feedback ket mangyaplikar kadagiti kostumbre a kolor, beddeng, estilo ti pokus, ken dagiti ikono ti likudan tapno nasaysayaat a maipakaammo ti feedback. Dagiti ikono ti likudan para iti <select>s ket magun-od laeng iti .form-select, ken saan .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)
    })
})()

Dagiti default ti browser

Saan kadi nga interesado kadagiti mensahe ti feedback ti kostumbre a panangipaneknek wenno panagsurat ti JavaScript tapno agbaliw kadagiti kababalin ti porma? Amin a nasayaat, mabalinmo nga usaren dagiti default ti browser. Padasem nga isubmite ti porma iti baba. Depende iti browser ken OS-mo, makitam ti naiduma bassit nga estilo ti feedback.

Bayat a dagitoy nga estilo ti feedback ket saan a mabalin nga estilo babaen ti CSS, mabalinmo pay laeng nga ipasayaat ti teksto ti feedback babaen ti 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>

Server nga dasig

Irekomendarmi ti panagusar ti panangipaneknek ti sikigan ti kliyente, ngem no kas pagarigan kasapulam ti panangipaneknek ti sikigan ti serbidor, mabalinmo nga ipakita dagiti saan nga umiso ken balido a tay-ak ti porma babaen ti .is-invalidken .is-valid. Paliiwenyo a .invalid-feedbacknasuportaran met kadagitoy a klase.

Para kadagiti saan nga umiso a tay-ak, siguraduen a ti saan nga umiso a mensahe ti feedback/biddut ket nainaig iti mainaig a tay-ak ti porma nga agus-usar aria-describedby(a mangipalagip a daytoy a kababalin ket mangipalubos ti ad-adu ngem maysa ida maitudo, no kas pagarigan ti tay-ak ket dati a mangitudo ti kanayonan a teksto ti porma).

Tapno matarimaan dagiti isyu kadagiti radius ti beddeng , dagiti grupo ti panagserrek ket agkasapulan ti kanayonan .has-validationa klase.

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

Dagiti nasuportaran nga elemento

Dagiti estilo ti panangipaneknek ket magun-od para kadagiti sumaganad a kontrol ti porma ken dagiti paset:

<input>s ken <textarea>s nga addaan .form-control(agraman agingga iti maysa .form-controlkadagiti grupo ti input) .
<select>s nga addaan.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>

Dagiti tip ti remienta

No ti layout ti pormam ket mangipalubos iti daytoy, mabalinmo nga isukat dagiti .{valid|invalid}-feedbackklase para kadagiti .{valid|invalid}-tooltipklase tapno mangipakita ti sungbat ti panangipaneknek iti maysa nga estilo a tooltip. Siguraduenyo nga adda nagannak nga addaan position: relativeiti dayta para iti tooltip positioning. Iti pagarigan iti baba, dagiti klase ti kolummi ket addaanen iti daytoy a dati, ngem ti proyektom ket mabalin a kasapulan ti alternatibo a panagisaad.

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

Dagiti Variable

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

Dagiti mixin

Dua a mixin ti napagtipon, babaen ti loop mi , tapno mangpataud kadagiti estilo ti feedback ti panangipaneknek ti pormami.

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

Mapa nga

Daytoy ti mapa ti Sass ti panangipaneknek manipud iti _variables.scss. Ibabawi wenno palawaen daytoy tapno mangpataud kadagiti nadumaduma wenno kanayonan nga estado.

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

Dagiti mapa ti $form-validation-statesket mabalin nga aglaon kadagiti tallo a pagpilian a parametro tapno mangbalbaliw kadagiti tooltip ken dagiti estilo ti pokus.

Silo

Nausar a mangulit kadagiti $form-validation-statespateg ti mapa tapno mangpataud kadagiti estilo ti panangipaneknekmi. Ania man a panagbalbaliw iti mapa ti Sass iti ngato ket maiparangarang iti naurnongmo a CSS babaen daytoy a loop.

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

Panag-customize

Dagiti estado ti panangipaneknek ket mabalin a mapasayaat babaen ti Sass nga addaan ti $form-validation-statesmapa. Mabirukan iti _variables.scssfilemi, daytoy a mapa ti Sass ket no kasano a mangpataudtayo kadagiti default valid/ invalidvalidation states. Nairaman ti naisanglad a mapa para iti panangipasayaat iti kolor, ikono, kolor ti tooltip, ken anniniwan ti pokus ti tunggal estado. Bayat nga awan dagiti sabali nga estado a suportado babaen dagiti browser, dagitoy nga agus-usar kadagiti kostumbre nga estilo ket nalaka a makainayon kadagiti ad-adu a komplikado a porma a feedback.

Pangngaasi a laglagipen a saanmi nga irekomendar ti panagpasayaat $form-validation-stateskadagiti pateg a saan met a mangbalbaliw ti form-validation-statemixin .