Bootstrap 5 Tutorial

Bootstrap 5 Form Validation

Last modified on: October 27, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">&nbsp;</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="9981ec00-39a8-4f83-88d0-e13747b1b6ed" data-message-model-slug="gpt-4o">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>Bootstrap 5: Form Validation</h3>
<p>Bootstrap 5 includes built-in form validation styles and classes that help create visually consistent and accessible form validation. By leveraging Bootstrap's validation styles, you can easily validate forms on the client side, display error messages, and apply styling for valid and invalid inputs.</p>
<hr />
<h3>Basic Validation Classes</h3>
<p>Bootstrap uses specific classes to apply validation styles:</p>
<ul>
<li><code>.is-valid</code>: Adds a green border and check icon to valid fields.</li>
<li><code>.is-invalid</code>: Adds a red border and an "x" icon to invalid fields.</li>
<li><code>.valid-feedback</code> and <code>.invalid-feedback</code>: Used to provide feedback messages for valid and invalid input states.</li>
</ul>
<hr />
<h3>Example: Valid and Invalid States</h3>
<p>Apply <code>.is-invalid</code> and <code>.is-valid</code> to input fields, along with feedback messages to display validation states.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;form class="needs-validation" novalidate&gt;
    &lt;div class="mb-3"&gt;
        &lt;label for="validationEmail" class="form-label"&gt;Email&lt;/label&gt;
        &lt;input type="email" class="form-control is-invalid" id="validationEmail" required&gt;
        &lt;div class="invalid-feedback"&gt;
            Please enter a valid email address.
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="mb-3"&gt;
        &lt;label for="validationPassword" class="form-label"&gt;Password&lt;/label&gt;
        &lt;input type="password" class="form-control is-valid" id="validationPassword" required&gt;
        &lt;div class="valid-feedback"&gt;
            Looks good!
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;button class="btn btn-primary" type="submit"&gt;Submit&lt;/button&gt;
&lt;/form&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Custom Validation Script</h3>
<p>Use JavaScript to add real-time validation feedback to the form. Adding <code>novalidate</code> disables the browser&rsquo;s default validation, allowing custom validation styles to take effect.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;script&gt;
    (function () {
        'use strict';
        // Fetch all the forms we want to apply custom validation to
        var forms = document.querySelectorAll('.needs-validation');
        // Loop over them and prevent submission
        Array.prototype.slice.call(forms).forEach(function (form) {
            form.addEventListener('submit', function (event) {
                if (!form.checkValidity()) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated');
            }, false);
        });
    })();
&lt;/script&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Validation on Selects and Checkboxes</h3>
<p>Validation also applies to checkboxes, radio buttons, and select elements. Here&rsquo;s an example with a select input and checkbox validation.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;form class="needs-validation" novalidate&gt;
    &lt;div class="mb-3"&gt;
        &lt;label for="validationSelect" class="form-label"&gt;Choose an option&lt;/label&gt;
        &lt;select class="form-select is-invalid" id="validationSelect" required&gt;
            &lt;option selected disabled value=""&gt;Choose...&lt;/option&gt;
            &lt;option&gt;Option 1&lt;/option&gt;
            &lt;option&gt;Option 2&lt;/option&gt;
        &lt;/select&gt;
        &lt;div class="invalid-feedback"&gt;
            Please select an option.
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="mb-3 form-check"&gt;
        &lt;input type="checkbox" class="form-check-input is-invalid" id="validationCheck" required&gt;
        &lt;label class="form-check-label" for="validationCheck"&gt;Agree to terms&lt;/label&gt;
        &lt;div class="invalid-feedback"&gt;
            You must agree before submitting.
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;button class="btn btn-primary" type="submit"&gt;Submit&lt;/button&gt;
&lt;/form&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Validation with Floating Labels</h3>
<p>Combine validation with floating labels for a compact, modern form layout.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="form-floating mb-3"&gt;
    &lt;input type="text" class="form-control is-invalid" id="floatingInput" placeholder="Username" required&gt;
    &lt;label for="floatingInput"&gt;Username&lt;/label&gt;
    &lt;div class="invalid-feedback"&gt;
        Please choose a username.
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More