How correctly validation should be used? (MDB 4.3)

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

legrooch pro asked 7 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

Add comment

Adrian Sawicki free answered 7 years ago

0 0 Best answer

Hi Leszek,

You should add require to all your inputs and add type="submit" to your submit button. Everything should be between <form></form> and it will work fine then.

Example :

<pre><code><form action="#">
    
    <div class="card">
        <div class="card-block">
            
            <div class="form-header  purple darken-4">
                <h3><i class="fa fa-lock"></i> Login:</h3>
            </div>
            
            <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></code></pre>

Regards,

Adrian

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Specification of the issue

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

legrooch

Pro User 0Support score
1Questions 0Answers 0Snippets