شيوههای پیشفرض مرورگر#
بسته به مرورگر و سیستمعامل شما، ممکن است سبکهای متفاوتی از بازخورد را مشاهده کنید.
<form class="row g-3">
<div class="col-md-4">
<label for="validationDefault01" class="form-label">نام</label>
<input type="text" class="form-control" id="validationDefault01" value="فرهاد" required>
</div>
<div class="col-md-4">
<label for="validationDefault02" class="form-label">نام خانوادگی</label>
<input type="text" class="form-control" id="validationDefault02" value="باقری" required>
</div>
<div class="col-md-4">
<label for="validationDefaultUsername" class="form-label">نام کاربری</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">شهر</label>
<input type="text" class="form-control" id="validationDefault03" required>
</div>
<div class="col-md-3">
<label for="validationDefault04" class="form-label">استان</label>
<select class="form-select" id="validationDefault04" required>
<option selected disabled value="">انتخاب کنید...</option>
<option>...</option>
</select>
</div>
<div class="col-md-3">
<label for="validationDefault05" class="form-label">کد پستی</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">
موافقت با شرایط و قوانین
</label>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">ارسال فرم</button>
</div>
</form>
استایلهای سفارشی#
برای پیامهای اعتبارسنجی فرم بوستاپ سفارشی، لازم است که ویژگی بولی novalidate را به <form> خود اضافه کنید. این امر ابزارهای بازخورد پیشفرض مرورگر را غیرفعال میکند، اما همچنان به APIهای اعتبارسنجی فرم در جاوااسکریپت دسترسی فراهم میکند. در هنگام تلاش برای ارسال، میتوانید سبکهای :invalid و :valid را در کنترلهای فرم مشاهده کنید.
<label for="cleave-date" class="form-label">تاریخ</label>
<input type="text" class="form-control" placeholder="DD-MM-YYYY" id="cleave-date">
سمت سرور#
ما پیشنهاد میکنیم از اعتبارسنجی سمتکلاینت استفاده کنید، اما در صورتی که به اعتبارسنجی سمت سرور نیاز دارید، میتوانید فیلدهای فرم نامعتبر و معتبر را با .is-invalid و .is-valid نشان دهید. توجه داشته باشید که .invalid-feedback نیز با این کلاسها پشتیبانی میشود.
<form class="row g-3">
<div class="col-md-4">
<label for="validationServer01" class="form-label">نام</label>
<input type="text" class="form-control is-valid" id="validationServer01" value="فرهاد" required>
<div class="valid-feedback">
خوب به نظر میرسد!
</div>
</div>
<div class="col-md-4">
<label for="validationServer02" class="form-label">نام خانوادگی</label>
<input type="text" class="form-control is-valid" id="validationServer02" value="باقری" required>
<div class="valid-feedback">
خوب به نظر میرسد!
</div>
</div>
<div class="col-md-4">
<label for="validationServerUsername" class="form-label">نام کاربری</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">
لطفاً یک نام کاربری انتخاب کنید.
</div>
</div>
</div>
<div class="col-md-6">
<label for="validationServer03" class="form-label">شهر</label>
<input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
<div id="validationServer03Feedback" class="invalid-feedback">
لطفاً یک شهر معتبر ارائه دهید.
</div>
</div>
<div class="col-md-3">
<label for="validationServer04" class="form-label">استان</label>
<select class="form-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
<option selected disabled value="">انتخاب کنید...</option>
<option>...</option>
</select>
<div id="validationServer04Feedback" class="invalid-feedback">
لطفاً یک استان معتبر انتخاب کنید.
</div>
</div>
<div class="col-md-3">
<label for="validationServer05" class="form-label">کد پستی</label>
<input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
<div id="validationServer05Feedback" class="invalid-feedback">
لطفاً یک کد پستی معتبر ارائه دهید.
</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">
موافقت با شرایط و قوانین
</label>
<div id="invalidCheck3Feedback" class="invalid-feedback">
شما باید پیش از ارسال موافقت کنید.
</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">ارسال فرم</button>
</div>
</form>
عناصر پشتیبانیشده#
استایلهای اعتبارسنجی برای کنترلها و اجزای فرم زیر در دسترس هستند:
<input>و<textarea>با.form-control(شامل حداکثر یک.form-controlدر گروههای ورودی)<select>با.form-select.form-check
<form class="row g-3">
<div class="col-md-4">
<label for="validationDefault01" class="form-label">نام</label>
<input type="text" class="form-control" id="validationDefault01" value="فرهاد" required>
</div>
<div class="col-md-4">
<label for="validationDefault02" class="form-label">نام خانوادگی</label>
<input type="text" class="form-control" id="validationDefault02" value="باقری" required>
</div>
<div class="col-md-4">
<label for="validationDefaultUsername" class="form-label">نام کاربری</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">شهر</label>
<input type="text" class="form-control" id="validationDefault03" required>
</div>
<div class="col-md-3">
<label for="validationDefault04" class="form-label">استان</label>
<select class="form-select" id="validationDefault04" required>
<option selected disabled value="">انتخاب کنید...</option>
<option>...</option>
</select>
</div>
<div class="col-md-3">
<label for="validationDefault05" class="form-label">کد پستی</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">
موافقت با شرایط و قوانین
</label>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">ارسال فرم</button>
</div>
</form>
نکات راهنما#
اگر طراحی فرم شما اجازه میدهد، میتوانید کلاسهای .{valid|invalid}-feedback را با کلاسهای .{valid|invalid}-tooltip تعویض کنید تا بازخورد اعتبارسنجی را در یک نکته راهنما با استایل نمایش دهید. مطمئن شوید که یک والد با position: relative بر روی آن برای موقعیتیابی نکته راهنما وجود دارد. در مثال زیر، کلاسهای ستونی ما این ویژگی را دارند، اما پروژه شما ممکن است نیاز به تنظیمات متفاوتی داشته باشد.
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-4 position-relative">
<label for="validationTooltip01" class="form-label">نام</label>
<input type="text" class="form-control" id="validationTooltip01" value="فرهاد" required>
<div class="valid-tooltip">
خوب به نظر میرسد!
</div>
</div>
<div class="col-md-4 position-relative">
<label for="validationTooltip02" class="form-label">نام خانوادگی</label>
<input type="text" class="form-control" id="validationTooltip02" value="باقری" required>
<div class="valid-tooltip">
خوب به نظر میرسد!
</div>
</div>
<div class="col-md-4 position-relative">
<label for="validationTooltipUsername" class="form-label">نام کاربری</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">
لطفاً یک نام کاربری منحصربهفرد و معتبر انتخاب کنید.
</div>
</div>
</div>
<div class="col-md-6 position-relative">
<label for="validationTooltip03" class="form-label">شهر</label>
<input type="text" class="form-control" id="validationTooltip03" required>
<div class="invalid-tooltip">
لطفاً یک شهر معتبر ارائه دهید.
</div>
</div>
<div class="col-md-3 position-relative">
<label for="validationTooltip04" class="form-label">استان</label>
<select class="form-select" id="validationTooltip04" required>
<option selected disabled value="">انتخاب کنید...</option>
<option>...</option>
</select>
<div class="invalid-tooltip">
لطفاً یک استان معتبر انتخاب کنید.
</div>
</div>
<div class="col-md-3 position-relative">
<label for="validationTooltip05" class="form-label">کد پستی</label>
<input type="text" class="form-control" id="validationTooltip05" required>
<div class="invalid-tooltip">
لطفاً یک کد پستی معتبر ارائه دهید.
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">ارسال فرم</button>
</div>
</form>