اعتبار سنجی

از طریق رفتارهای پیش‌فرض مرورگر یا سبک‌های سفارشی و جاوا اسکریپت، بازخورد ارزشمند و کاربردی را با تأیید فرم HTML5 به کاربران خود ارائه دهید.

در این صفحه

ما می‌دانیم که در حال حاضر سبک‌های اعتبارسنجی سفارشی و راهنمایی‌های ابزار سمت مشتری در دسترس نیستند، زیرا در معرض فناوری‌های کمکی نیستند. در حالی که ما روی یک راه حل کار می کنیم، توصیه می کنیم از گزینه سمت سرور یا روش اعتبارسنجی مرورگر پیش فرض استفاده کنید.

چگونه کار می کند

در اینجا نحوه عملکرد اعتبار فرم با بوت استرپ آمده است:

اعتبار سنجی فرم HTML از طریق دو کلاس شبه CSS :invalidو :valid. برای عناصر <input>،، <select>و کاربرد <textarea>دارد.
بوت استرپ دامنه :invalidو :validاستایل ها را به کلاس والد .was-validated، که معمولاً برای کلاس اعمال می شود، اعمال می کند <form>. در غیر این صورت، هر فیلد الزامی بدون مقدار در بارگذاری صفحه نامعتبر نشان داده می شود. به این ترتیب، می توانید انتخاب کنید که چه زمانی آنها را فعال کنید (معمولاً پس از ارسال فرم).
برای بازنشانی ظاهر فرم (به عنوان مثال، در مورد ارسال‌های فرم پویا با استفاده از AJAX)، پس از ارسال دوباره .was-validatedکلاس را از کلاس حذف کنید.<form>
به عنوان یک بازگشت، .is-invalidو .is-validکلاس ها ممکن است به جای شبه کلاس ها برای اعتبارسنجی سمت سرور استفاده شوند. آنها نیازی به .was-validatedکلاس والدین ندارند.
به دلیل محدودیت‌هایی که در نحوه عملکرد CSS وجود دارد، ما نمی‌توانیم (در حال حاضر) سبک‌هایی را <label>که قبل از کنترل فرم در DOM قرار می‌گیرد بدون کمک جاوا اسکریپت سفارشی اعمال کنیم.
همه مرورگرهای مدرن از API اعتبارسنجی محدودیت پشتیبانی می‌کنند، مجموعه‌ای از روش‌های جاوا اسکریپت برای اعتبارسنجی کنترل‌های فرم.
پیام‌های بازخورد ممکن است از پیش‌فرض‌های مرورگر (برای هر مرورگر متفاوت، و از طریق CSS غیرقابل استایل) یا سبک‌های بازخورد سفارشی ما با HTML و CSS اضافی استفاده کنند.
می توانید پیام های اعتبار سفارشی را setCustomValidityدر جاوا اسکریپت ارائه دهید.

با در نظر گرفتن این موضوع، دموهای زیر را برای سبک‌های اعتبارسنجی فرم سفارشی، کلاس‌های سمت سرور اختیاری و پیش‌فرض‌های مرورگر در نظر بگیرید.

سبک های سفارشی

برای پیام‌های اعتبارسنجی فرم بوت استرپ سفارشی، باید novalidateویژگی بولین را به خود اضافه کنید <form>. با این کار نکات ابزار بازخورد پیش‌فرض مرورگر غیرفعال می‌شود، اما همچنان دسترسی به APIهای تأیید فرم در جاوا اسکریپت را فراهم می‌کند. سعی کنید فرم زیر را ارسال کنید؛ جاوا اسکریپت ما دکمه ارسال را قطع می کند و بازخورد را به شما ارسال می کند. هنگام تلاش برای ارسال، سبک‌ها :invalidو :validسبک‌های اعمال شده روی کنترل‌های فرم خود را مشاهده خواهید کرد.

سبک‌های بازخورد سفارشی، رنگ‌های سفارشی، حاشیه‌ها، سبک‌های فوکوس و نمادهای پس‌زمینه را برای ارتباط بهتر بازخورد اعمال می‌کنند. نمادهای پس‌زمینه برای <select>s فقط با .form-selectو نه در دسترس هستند .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)
  })
})()

پیش فرض های مرورگر

علاقه ای به پیام های بازخورد تأیید اعتبار سفارشی یا نوشتن جاوا اسکریپت برای تغییر رفتارهای فرم ندارید؟ خیلی خوب است، می توانید از پیش فرض های مرورگر استفاده کنید. سعی کنید فرم زیر را ارسال کنید. بسته به مرورگر و سیستم عامل خود، سبک کمی متفاوت از بازخورد را مشاهده خواهید کرد.

در حالی که این سبک‌های بازخورد را نمی‌توان با CSS سبک‌سازی کرد، همچنان می‌توانید متن بازخورد را از طریق جاوا اسکریپت سفارشی کنید.

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>

سمت سرور

ما استفاده از اعتبار سنجی سمت سرویس گیرنده را توصیه می کنیم، اما در صورت نیاز به اعتبارسنجی سمت سرور، می توانید فیلدهای فرم نامعتبر و معتبر را با .is-invalidو نشان دهید .is-valid. توجه داشته باشید که .invalid-feedbackبا این کلاس ها نیز پشتیبانی می شود.

برای فیلدهای نامعتبر، مطمئن شوید که بازخورد/پیام خطای نامعتبر با فیلد فرم مربوطه مرتبط است aria-describedby(توجه داشته باشید که این ویژگی اجازه می دهد تا بیش از یک idمورد ارجاع داده شود، در صورتی که فیلد قبلاً به متن فرم اضافی اشاره دارد).

برای رفع مشکلات شعاع مرزی.has-validation ، گروه‌های ورودی به یک کلاس اضافی نیاز دارند .

html

<form class="row g-3">
  <div class="col-md-4">
    <label for="validationServer01" class="form-label">First name</label>
    <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  <div class="col-md-4">
    <label for="validationServer02" class="form-label">Last name</label>
    <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  <div class="col-md-4">
    <label for="validationServerUsername" class="form-label">Username</label>
    <div class="input-group has-validation">
      <span class="input-group-text" id="inputGroupPrepend3">@</span>
      <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3 validationServerUsernameFeedback" required>
      <div id="validationServerUsernameFeedback" class="invalid-feedback">
        Please choose a username.
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <label for="validationServer03" class="form-label">City</label>
    <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
    <div id="validationServer03Feedback" class="invalid-feedback">
      Please provide a valid city.
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationServer04" class="form-label">State</label>
    <select class="form-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
      <option selected disabled value="">Choose...</option>
      <option>...</option>
    </select>
    <div id="validationServer04Feedback" class="invalid-feedback">
      Please select a valid state.
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationServer05" class="form-label">Zip</label>
    <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
    <div id="validationServer05Feedback" class="invalid-feedback">
      Please provide a valid zip.
    </div>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div id="invalidCheck3Feedback" class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
</form>

عناصر پشتیبانی شده

سبک‌های اعتبارسنجی برای کنترل‌ها و مؤلفه‌های فرم زیر در دسترس هستند:

<input>s و <textarea>s با .form-control(از جمله حداکثر یک .form-controlدر گروه های ورودی)
<select>با.form-select
.form-checkس

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>

نکات ابزار

اگر طرح‌بندی فرم شما اجازه می‌دهد، می‌توانید کلاس‌ها را با .{valid|invalid}-feedbackکلاس‌ها تعویض کنید .{valid|invalid}-tooltipتا بازخورد اعتبارسنجی را در یک راهنمای ابزار سبک‌دهی شده نشان دهید. حتماً یک والد position: relativeبرای موقعیت‌یابی راهنمای ابزار همراه داشته باشید. در مثال زیر، کلاس‌های ستون ما قبلاً این مورد را دارند، اما پروژه شما ممکن است به یک راه‌اندازی جایگزین نیاز داشته باشد.

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>

ساس

متغیرها

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

مخلوط ها

دو میکسین از طریق حلقه ما با هم ترکیب می‌شوند تا سبک‌های بازخورد اعتبارسنجی فرم ما را ایجاد کنند.

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

نقشه

این نقشه Sass اعتبارسنجی از _variables.scssاست. برای ایجاد حالت های مختلف یا اضافی، این را لغو یا گسترش دهید.

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

Maps of $form-validation-statesمی‌تواند شامل سه پارامتر اختیاری برای نادیده گرفتن نکات ابزار و سبک‌های فوکوس باشد.

حلقه

برای تکرار $form-validation-statesروی مقادیر نقشه برای ایجاد سبک های اعتبارسنجی ما استفاده می شود. هر گونه تغییر در نقشه Sass فوق در CSS کامپایل شده شما از طریق این حلقه منعکس خواهد شد.

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

سفارشی کردن

حالت های اعتبارسنجی را می توان از طریق Sass با $form-validation-statesنقشه سفارشی کرد. _variables.scssاین نقشه Sass که در فایل ما قرار دارد نحوه ایجاد حالت های پیش فرض valid/ invalidاعتبارسنجی است. شامل یک نقشه تو در تو برای سفارشی کردن رنگ، نماد، رنگ راهنمای ابزار و سایه فوکوس هر حالت است. در حالی که هیچ حالت دیگری توسط مرورگرها پشتیبانی نمی شود، کسانی که از سبک های سفارشی استفاده می کنند می توانند به راحتی بازخورد فرم پیچیده تری را اضافه کنند.