اعتبار سنجی فرم ها

  1. فرم ها
  2. اعتبار سنجی فرم ها

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

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

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

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

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

خوب به نظر می رسد!
خوب به نظر می رسد!
@
لطفا یک نام کاربری انتخاب کنید
لطفا یک شهر معتبر ارائه دهید.
لطفاً یک حالت معتبر انتخاب کنید.
لطفا یک فایل فشرده معتبر ارائه دهید.
قبل از ارسال باید موافقت کنید.
 <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>

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

متن فرم در سطح بلوک یا درون خطی را می توان با استفاده از آن ایجاد کرد .form-text .

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

خوب به نظر می رسد!
خوب به نظر می رسد!
@
لطفا یک نام کاربری منحصر به فرد و معتبر انتخاب کنید.
لطفا یک شهر معتبر ارائه دهید.
لطفاً یک حالت معتبر انتخاب کنید.
لطفا یک فایل فشرده معتبر ارائه دهید.
     <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>
© Velzon.
طراحی و توسعه توسط مرداد