Topic: How correctly validation should be used? (MDB 4.3)

legrooch pro asked 6 years ago


Hello, I looked into documentation about validating forms. Adding class "validate" gives validation on input, not on submit. So should I use "required" element on each input to validate whole form? I need to give user feedback on input and on submit. Combining "required" with "validate" gives display bug - two infos are displayed on same position. Can I count on help with that problem? Normally I'm not a developer normally.... Regards Leszek

Adrian Sawicki free answered 6 years ago


Hi Leszek, You should add require to all your inputs and add type="submit" to your submit button. Everything should be between
and it will work fine then. Example :
<form action="#">
    <!--Form with header-->
    <div class="card">
        <div class="card-block">
            <!--Header-->
            <div class="form-header  purple darken-4">
                <h3><i class="fa fa-lock"></i> Login:</h3>
            </div>
            <!--Body-->
            <div class="md-form">
                <i class="fa fa-envelope prefix"></i>
                <input type="text" id="form2" class="form-control" required>
                <label for="form2">Your email</label>
            </div>
            <div class="md-form">
                <i class="fa fa-lock prefix"></i>
                <input type="password" id="form4" class="form-control" required>
                <label for="form4">Your password</label>
            </div>
            <div class="text-center">
                <button type="submit" class="btn btn-deep-purple">Login</button>
            </div>
        </div>
    </div>
    <!--/Form with header-->
</form>
Regards, Adrian

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags