Mirkaneessuu

Fayyadamtoota keetiif yaada gatii qabu, tarkaanfii fudhachuu danda'u mirkaneessuu unka HTML5 waliin, karaa amala durtii biraawzari ykn akkaataa amalaafi JaavaScript kenni.

Fuula kana irratti

Yeroo ammaa akkaataaleen mirkaneessuu amala gama maamilaa fi gorsi meeshaalee, teknooloojiiwwan gargaarsaaf waan hin saaxilamneef, dhaqqabamaa akka hin taane ni beekna. Furmaata irratti osoo hojjennu, filannoo gama sarvarii ykn mala mirkaneessa biraawzari durtii fayyadamuu ni gorsina.

Akkaataa itti hojjetu

Akkaataa mirkaneessi unkaa Bootstrap waliin hojjetu kunooti:

Mirkaneessi unka HTML karaa CSS's lamaan pseudo-classes, :invalidfi :valid. <input>, <select>, fi <textarea>elementoota irratti hojjeta .
Bootstrap akkaataa :invalidfi gara gita :validwarraatti bal'isa, yeroo baay'ee . Yoo kana hin taane, man'ee barbaadamu kamiyyuu gatii hin qabne fe'iinsa fuula irratti akka sirrii hin taaneetti mul'ata. Haala kanaan, yoom akka isaan kakaastu filachuu dandeessa (akkaataa idileetti erga unka galchuuf yaalamee booda)..was-validated<form>
Mul'ata unkaa deebisanii saaguuf (fakkeenyaaf, haala ergaa unkaa daayinamikii AJAX fayyadamuun), .was-validatedgita <form>ammas erga ergamee booda irraa haqi.
Akka duubatti deebi'uutti, .is-invalidfi .is-validgitaawwan bakka gita-sobaa mirkaneessuu gama sarvariidhaaf fayyadamuu danda'u . .was-validatedKutaa warraa hin barbaadan .
Sababa danqaa akkaataa CSS itti hojjetu irraa kan ka'e, <label>gargaarsa JaavaScript amala malee to'annoo unkaa DOM keessatti dura dhufutti (yeroo ammaa) akkaataalee hojii irra oolchuu hin dandeenyu.
Biraawuzaroonni ammayyaa hundi API mirkaneessa danqaa deeggaru , malawwan JaavaScript walduraa duubaan too'annoo unkaa mirkaneessuuf.
Ergaawwan yaada deebii durtii biraawzariitti fayyadamuu danda'u (tokkoon tokkoo biraawzariif adda addaa, fi karaa CSS kan hin style) ykn akkaataa yaada keenya amala HTML fi CSS dabalataa wajjin fayyadamuu danda'u.
setCustomValidityErgaawwan sirrii ta'uu amala JaavaScript keessatti waliin kennuu dandeessa .

Kana yaada keessa galchuun, akkaataawwan mirkaneessuu unkaa amala keenyaaf, gitawwan gama sarvarii filannoo, fi durtii biraawzariif demoowwan armaan gadii ilaali.

Akkaataawwan amala

novalidateErgaawwan mirkaneessuu unkaa Bootstrap amalaaf, amaloota boolii gara keetti dabaluu si barbaachisa <form>. Kunis gorsa meeshaalee yaada durtii biraawzari hanqisa, garuu ammas APIwwan mirkaneessuu unkaa JaavaScript keessatti qaqqabummaa kenna. Unka armaan gadii dhiyeessuuf yaalaa; JavaScript keenya button submit jedhu addaan kutee yaada isiniif dabarsee isiniif dabarsa. :invalidYeroo galchuuf yaaltu, akkaataalee fi :validtoo'annoo unkaa kee irratti hojiirra oolan ni argita .

Akkaataan yaada amala halluu amala, daangaa, akkaataa xiyyeeffannoo, fi mallattoolee duubbee yaada haala gaariin walqunnamsiisuuf hojii irra oolchu. Mallattoolee duubbee <select>s qofa waliin argamu .form-select, malee hin argamu .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)
    })
})()

Durtii biraawzari

Ergaawwan yaada mirkaneessuu amala ykn amala unkaa jijjiiruuf JaavaScript barreessuudhaaf fedhii hin qabduu? Hundi gaarii dha, durtii browser fayyadamuu dandeessa. Unka armaan gadii galchuuf yaalaa. Browser fi OS keessan irratti hundaa'uun akkaataa yaada xiqqoo adda ta'e ni argitu.

Akkaataan yaada kennuu kun CSS waliin akkaataa ta'uu kan hin dandeenye yoo ta'ellee, ammas barruu yaada deebii karaa JaavaScript dhuunfachuu dandeessa.

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

Gama sarvariitiin

Mirkaneessuu gama maamilaa fayyadamuu ni gorsina, garuu yoo mirkaneessuu gama sarvarii barbaadde, man'ee unkaa sirrii hin taanee fi sirrii ta'e fi waliin agarsiisuu .is-invaliddandeessa .is-valid. Hubadhaa innis .invalid-feedbackgita kanaan deeggaramee jira.

Man'eewwan sirrii hin taaneef, ergaan yaada/dogongoraa sirrii hin taane dirree unkaa barbaachisaa fayyadamuun walqabsiisuu isaa mirkaneessi aria-describedby(amalli kun tokkoo ol idakka wabii hayyamu hubadhu, yoo man'een duraan barruu unkaa dabalataa agarsiise).

Dhimmoota raadiyoo daangaa waliin sirreessuuf , gareewwan galtee .has-validationgita dabalataa barbaadu .

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

Qaamolee deeggaraman

Akkaataaleen mirkaneessuu too'annoowwanii fi qaamolee unkaa armaan gadiitiif ni argamu:

<input>s fi <textarea>s waliin ( garee galtee keessatti .form-controlhanga tokko dabalatee ) ..form-control
<select>s waliin.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>

Gorsa Meeshaalee

Yoo qindaa'inni unkaa kee hayyame, yaada mirkaneessuu gorsa meeshaa akkaataa keessatti agarsiisuuf gitawwan .{valid|invalid}-feedbackgitaaf jijjiiruu dandeessa . Tooltip positioning'f .{valid|invalid}-tooltipwarra irratti qabu qabaachuu kee mirkaneessi . position: relativeFakkeenya armaan gadii keessatti, gitaawwan tarjaa keenya kana duraan qabu, garuu pirojektiin kee qindeessaa filannoo barbaadu danda'a.

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

Jijjiiramoota

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

Mixins jedhaman

Miksiin lama walitti makamu, karaa loop keenyaa , akkaataa yaada deebii mirkaneessuu unkaa keenyaa uumuuf.

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

Kaartaa

Kun kaartaa Sass mirkaneessuu irraa _variables.scss. Haalata adda addaa ykn dabalataa uumuuf kana irra darbi ykn dheeressi.

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

Kaartoonni of gorsa meeshaalee $form-validation-statesfi akkaataa xiyyeeffannoo irra darbuuf qajoojiiwwan filannoo sadii qabaachuu danda'u.

Furgaasuu

$form-validation-statesAkkaataa mirkaneessuu keenya uumuuf gatiiwwan kaartaa irratti irra deddeebi'uuf fayyadama . Fooyya'iinsi kamiyyuu kaartaa Sass armaan olii irratti karaa loop kanaa CSS kee qindaa'e keessatti ni calaqqisa.

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

Dhuunfachiisuu

$form-validation-statesHaalawwan mirkaneessuu karaa Sass kaartaa waliin dhuunfachuu danda'u . Faayilii keenya keessatti kan argamu _variables.scss, kaartaan Sass kun akkaataa haalata durtii valid/ invalidmirkaneessuu itti uumnudha. Kaartaa man'ee halluu, mallattoo, halluu gorsa meeshaa, fi golgaa xiyyeeffannoo tokkoon tokkoo haalataa dhuunfachuuf hammatame. Haalli biroo biraawzarootaan kan hin deeggaramne yoo ta'ellee, warri akkaataa amala fayyadaman salphaatti yaada unkaa walxaxaa ta'e dabaluu danda'u.

Hubadhaa osoo mixin hin fooyyessin gatiiwwan dhuunfachuu akka hin$form-validation-statesform-validation-state gorsine .