اعتبار سنجی

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

اعتبار سنجی در بوت استرپ
سبک های سفارشی

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

سبک‌های بازخورد سفارشی، رنگ‌های سفارشی، حاشیه‌ها، سبک‌های فوکوس و آیکون‌های پس‌زمینه را برای ارتباط بهتر بازخورد اعمال می‌کنند. آیکون‌های پس‌زمینه برای selects فقط با .form-selectو نه در دسترس هستند .form-control.

سبک های سفارشی مثال
به نظر خوب میاد!
به نظر خوب میاد!
@
لطفا یک نام کاربری انتخاب کنید
لطفا یک شهر معتبر ارائه دهید.
لطفاً یک حالت معتبر انتخاب کنید.
لطفا یک فایل فشرده معتبر ارائه دهید.
قبل از ارسال باید موافقت کنید.
<form class="row g-3 needs-validation" novalidate="">
  <div class="col-md-4"><label class="form-label" for="validationCustom01">First name</label><input class="form-control" id="validationCustom01" type="text" value="Mark" required="" />
    <div class="valid-feedback">Looks good!</div>
  </div>
  <div class="col-md-4"><label class="form-label" for="validationCustom02">Last name</label><input class="form-control" id="validationCustom02" type="text" value="Otto" required="" />
    <div class="valid-feedback">Looks good!</div>
  </div>
  <div class="col-md-4"><label class="form-label" for="validationCustomUsername">Username</label>
    <div class="input-group has-validation"><span class="input-group-text" id="inputGroupPrepend">@</span><input class="form-control" id="validationCustomUsername" type="text" aria-describedby="inputGroupPrepend" required="" />
      <div class="invalid-feedback">Please choose a username.</div>
    </div>
  </div>
  <div class="col-md-6"><label class="form-label" for="validationCustom03">City</label><input class="form-control" id="validationCustom03" type="text" required="" />
    <div class="invalid-feedback">Please provide a valid city.</div>
  </div>
  <div class="col-md-3"><label class="form-label" for="validationCustom04">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 class="form-label" for="validationCustom05">Zip</label><input class="form-control" id="validationCustom05" type="text" 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" id="invalidCheck" type="checkbox" value="" required="" /><label class="form-check-label mb-0" for="invalidCheck">Agree to terms and conditions</label>
      <div class="invalid-feedback mt-0">You must agree before submitting.</div>
    </div>
  </div>
  <div class="col-12"><button class="btn btn-primary" type="submit">Submit form</button></div>
</form>
تولتیپ‌ها

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

به نظر خوب میاد!
به نظر خوب میاد!
@
لطفا یک نام کاربری منحصر به فرد و معتبر انتخاب کنید.
لطفا یک شهر معتبر ارائه دهید.
لطفاً یک حالت معتبر انتخاب کنید.
لطفا یک فایل فشرده معتبر ارائه دهید.
<form class="row g-3 needs-validation" novalidate="">
  <div class="col-md-4 position-relative"><label class="form-label" for="validationTooltip01">First name</label><input class="form-control" id="validationTooltip01" type="text" value="Mark" required="" />
    <div class="valid-tooltip">Looks good!</div>
  </div>
  <div class="col-md-4 position-relative"><label class="form-label" for="validationTooltip02">Last name</label><input class="form-control" id="validationTooltip02" type="text" value="Otto" required="" />
    <div class="valid-tooltip">Looks good!</div>
  </div>
  <div class="col-md-4 position-relative"><label class="form-label" for="validationTooltipUsername">Username</label>
    <div class="input-group"><span class="input-group-text" id="validationTooltipUsernamePrepend">@</span><input class="form-control" id="validationTooltipUsername" type="text" 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 class="form-label" for="validationTooltip03">City</label><input class="form-control" id="validationTooltip03" type="text" required="" />
    <div class="invalid-tooltip">Please provide a valid city.</div>
  </div>
  <div class="col-md-3 position-relative"><label class="form-label" for="validationTooltip04">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 class="form-label" for="validationTooltip05">Zip</label><input class="form-control" id="validationTooltip05" type="text" 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>

ممنون که با فالکون خلق کردید

نسخه 3.4.0

تنظیمات

سبک سفارشی خود را تنظیم کنید

طرح رنگ بندی

حالت رنگ مناسب را برای برنامه خود انتخاب کنید.


RTL حالت

جهت زبان خود را تغییر دهید

RTL راهنما

چیدمان سیال

سیستم چیدمان کانتینر را تغییر دهید

راهنما سیال

موقعیت ناوبری

یک سیستم ناوبری مناسب برای برنامه وب خود انتخاب کنید


سبک نوار ناوبری عمودی

برای نوار ناوبری عمودی خود بین سبک ها جابه جا شوید

دیدن راهنما

چیزی که میبینی را دوست داری؟

برای خرید قالب فالکون از راستچین اقدام کنید.

خرید
شخصی سازی