اعتبار سنجی
از طریق رفتارهای پیش‌فرض مرورگر یا سبک‌های سفارشی و جاوا اسکریپت، بازخورد ارزشمند و کاربردی را با تأیید فرم 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>
