1. Hyper
  2. Forms
  3. Form Validation

Form Validation

Custom styles

Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback. Background icons for <select>s are only available with .custom-select, and not .form-control.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting. 
                                                    
                                                        <form class="needs-validation" novalidate>
                                                            <div class="form-group mb-3">
                                                                <label for="validationCustom01">First name</label>
                                                                <input type="text" class="form-control" id="validationCustom01"
                                                                    placeholder="First name" value="Mark" required>
                                                                <div class="valid-feedback">
                                                                    Looks good!
                                                                </div>
                                                            </div>
                                                            <div class="form-group mb-3">
                                                                <label for="validationCustom02">Last name</label>
                                                                <input type="text" class="form-control" id="validationCustom02"
                                                                    placeholder="Last name" value="Otto" required>
                                                                <div class="valid-feedback">
                                                                    Looks good!
                                                                </div>
                                                            </div>
                                                            <div class="form-group mb-3">
                                                                <label for="validationCustomUsername">Username</label>
                                                                <div class="input-group">
                                                                    <div class="input-group-prepend">
                                                                        <span class="input-group-text" id="inputGroupPrepend">@</span>
                                                                    </div>
                                                                    <input type="text" class="form-control" id="validationCustomUsername"
                                                                        placeholder="Username" aria-describedby="inputGroupPrepend"
                                                                        required>
                                                                    <div class="invalid-feedback">
                                                                        Please choose a username.
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="form-group mb-3">
                                                                <label for="validationCustom03">City</label>
                                                                <input type="text" class="form-control" id="validationCustom03"
                                                                    placeholder="City" required>
                                                                <div class="invalid-feedback">
                                                                    Please provide a valid city.
                                                                </div>
                                                            </div>
                                                            <div class="form-group mb-3">
                                                                <label for="validationCustom04">State</label>
                                                                <input type="text" class="form-control" id="validationCustom04"
                                                                    placeholder="State" required>
                                                                <div class="invalid-feedback">
                                                                    Please provide a valid state.
                                                                </div>
                                                            </div>
                                                            <div class="form-group mb-3">
                                                                <label for="validationCustom05">Zip</label>
                                                                <input type="text" class="form-control" id="validationCustom05"
                                                                    placeholder="Zip" required>
                                                                <div class="invalid-feedback">
                                                                    Please provide a valid zip.
                                                                </div>
                                                            </div>
                                                            <div class="form-group mb-3">
                                                                <div class="custom-control custom-checkbox form-check">
                                                                    <input type="checkbox" class="custom-control-input" id="invalidCheck"
                                                                        required>
                                                                    <label class="custom-control-label" for="invalidCheck">Agree to terms
                                                                        and conditions</label>
                                                                    <div class="invalid-feedback">
                                                                        You must agree before submitting.
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <button class="btn btn-primary" type="submit">Submit form</button>
                                                        </form>

Tooltips

If your form layout allows it, you can swap the .{valid|invalid}-feedback classes for .{valid|invalid}-tooltip classes to display validation feedback in a styled tooltip. Be sure to have a parent with position: relative on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.

Looks good!
Please enter first name.
Looks good!
Please enter last name.
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip. 
                                                    
                                                        <form class="needs-validation" novalidate>
                                                            <div class="form-group position-relative mb-3">
                                                                <label for="validationTooltip01">First name</label>
                                                                <input type="text" class="form-control" id="validationTooltip01"
                                                                    placeholder="First name" value="Mark" required>
                                                                <div class="valid-tooltip">
                                                                    Looks good!
                                                                </div>
                                                                <div class="invalid-tooltip">
                                                                    Please enter first name.
                                                                </div>
                                                            </div>
                                                            <div class="form-group position-relative mb-3">
                                                                <label for="validationTooltip02">Last name</label>
                                                                <input type="text" class="form-control" id="validationTooltip02"
                                                                    placeholder="Last name" value="Otto" required>
                                                                <div class="valid-tooltip">
                                                                    Looks good!
                                                                </div>
                                                                <div class="invalid-tooltip">
                                                                    Please enter last name.
                                                                </div>
                                                            </div>
                                                            <div class="form-group position-relative mb-3">
                                                                <label for="validationTooltipUsername">Username</label>
                                                                <div class="input-group">
                                                                    <div class="input-group-prepend">
                                                                        <span class="input-group-text"
                                                                            id="validationTooltipUsernamePrepend">@</span>
                                                                    </div>
                                                                    <input type="text" class="form-control" id="validationTooltipUsername"
                                                                        placeholder="Username"
                                                                        aria-describedby="validationTooltipUsernamePrepend" required>
                                                                    <div class="invalid-tooltip">
                                                                        Please choose a unique and valid username.
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="form-group position-relative mb-3">
                                                                <label for="validationTooltip03">City</label>
                                                                <input type="text" class="form-control" id="validationTooltip03"
                                                                    placeholder="City" required>
                                                                <div class="invalid-tooltip">
                                                                    Please provide a valid city.
                                                                </div>
                                                            </div>
                                                            <div class="form-group position-relative mb-3">
                                                                <label for="validationTooltip04">State</label>
                                                                <input type="text" class="form-control" id="validationTooltip04"
                                                                    placeholder="State" required>
                                                                <div class="invalid-tooltip">
                                                                    Please provide a valid state.
                                                                </div>
                                                            </div>
                                                            <div class="form-group position-relative mb-3">
                                                                <label for="validationTooltip05">Zip</label>
                                                                <input type="text" class="form-control" id="validationTooltip05"
                                                                    placeholder="Zip" required>
                                                                <div class="invalid-tooltip">
                                                                    Please provide a valid zip.
                                                                </div>
                                                            </div>
                                                            <button class="btn btn-primary" type="submit">Submit form</button>
                                                        </form>
Settings
Color Scheme
Width
Left Sidebar
Purchase Now