Activity Stream
Report-Fix / Update

Add 3 files to Tasks

Monday , 4:24 PM
Project Status

Marked Design as Completed

Monday , 3:00 PM
UI
Larkon Application UI v2.0.0 Latest

Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.

Monday , 2:10 PM
avatar-5
Alex Smith Attached Photos
Monday 1:00 PM
avatar-5
Rebecca J. added a new team member

Added a new member to Front Dashboard

Monday 10:00 AM
Achievements

Earned a " Best Product Award"

Monday 9:30 AM
View All
Theme Settings
Color Scheme
Topbar Color
Menu Color
Sidebar Size
Browser Default#

Depending on your browser and OS, you’ll see a slightly different style of feedback.

@
html
                                                
                                                    <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>
                                                
                                            
Custom styles#

For custom Bootstrap form validation messages, you’ll need to add the novalidate boolean attribute to your <form>. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. When attempting to submit, you’ll see the :invalid and :valid styles applied to your form controls.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting.
html
                                            
                                                <label for="cleave-date" class="form-label">Date</label>
                                                <input type="text" class="form-control" placeholder="DD-MM-YYYY" id="cleave-date">
                                            
                                        
Server side#

We recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with .is-invalid and .is-valid. Note that .invalid-feedback is also supported with these classes.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting.
html
                                                
                                                    <form class="row g-3">
                                                        <div class="col-md-4">
                                                            <label for="validationServer01" class="form-label">First name</label>
                                                            <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
                                                            <div class="valid-feedback">
                                                                Looks good!
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <label for="validationServer02" class="form-label">Last name</label>
                                                            <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
                                                            <div class="valid-feedback">
                                                                Looks good!
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <label for="validationServerUsername" class="form-label">Username</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">
                                                                    Please choose a username.
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label for="validationServer03" class="form-label">City</label>
                                                            <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
                                                            <div id="validationServer03Feedback" class="invalid-feedback">
                                                                Please provide a valid city.
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <label for="validationServer04" class="form-label">State</label>
                                                            <select class="form-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
                                                                <option selected disabled value="">Choose...</option>
                                                                <option>...</option>
                                                            </select>
                                                            <div id="validationServer04Feedback" class="invalid-feedback">
                                                                Please select a valid state.
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <label for="validationServer05" class="form-label">Zip</label>
                                                            <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
                                                            <div id="validationServer05Feedback" class="invalid-feedback">
                                                                Please provide a valid zip.
                                                            </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">
                                                                    Agree to terms and conditions
                                                                </label>
                                                                <div id="invalidCheck3Feedback" 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>
                                                
                                            
Supported elements#

Validation styles are available for the following form controls and components:

  • <input>s and <textarea>s with .form-control (including up to one .form-control in input groups)
  • <select>s with .form-select
  • .form-checks
Please enter a message in the textarea.
Example invalid feedback text
More example invalid feedback text
Example invalid select feedback
Example invalid form file feedback
html
                                                
                                                    <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>
                                                
                                            
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!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
html
                                                
                                                    <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>
                                                
                                            
© Larkon. Crafted by Techzaa