Stepper Custom Validation

Topic: Stepper Custom Validation

Inasyah free asked 4 years ago

Hi,

I am using the stepper component from the Pro version.

But I want to customize the validation with my own code.

Also I want to use my custom form (I want the user to put in a Path e.g. C://home/file.xy) instead of e.g. the email form.

How would I achieve this using the linear stepper sample code?

                <li class="step active">
                <div data-step-label="Type something" class="step-title waves-effect waves-dark">Step 1</div>
                <div class="step-new-content">
                    <div class="row">
                        <div class="md-form col-12 ml-auto">
                            <input id="email-linear" type="email" class="form-control validate" required>
                            <label for="email-linear">Your e-mail</label>
                        </div>
                    </div>
                    <div class="step-actions">
                        <button class="waves-effect waves-dark btn btn-sm btn-primary next-step">CONTINUE</button>
                    </div>
                </div>
            </li>

Thank you for your help :)

PS: Why does it say I do not have Premium support even though I purchased the Pro version today?

enter image description here

Grzegorz Bujański staff commented 4 years ago

Hi. You can delete validate class and require attr from input and add your own validation code.

Regarding the premium support. I will report it to a person who is able to check what is happening

Add comment

Inasyah free answered 4 years ago

0 0 Best answer

<p>Thank you for the answer :),</p>

<p>I have a follow up question:
How would I do a password confirmation field within step 2?</p>

<pre class="prettyprint"><code>            <li class="step">
                <div class="step-title">Step 2</div>
                <div class="step-new-content">
                    <div class="row">
                        <div class="md-form col-12 ml-auto">
                            <input id="password-linear" type="password" class="form-control" required>
                            <label for="password-linear">Your password</label>
                        </div>
                        <div class="md-form col-12 ml-auto">
                            <input id="password-confirm-linear" type="password" class="form-control" required>
                            <label for="password-confirm-linear">Confirm password</label>
                        </div>
                    </div>
                    <div class="step-actions">
                        <button class="btn btn-sm btn-primary next-step">CONTINUE</button>
                        <button class="btn btn-sm btn-secondary previous-step">BACK</button>
                    </div>
                </div>
            </li>
</code></pre>

Please insert min. 20 characters.

Thank you for the answer :),

I have a follow up question: How would I do a password confirmation field within step 2?

            <li class="step">
                <div class="step-title">Step 2</div>
                <div class="step-new-content">
                    <div class="row">
                        <div class="md-form col-12 ml-auto">
                            <input id="password-linear" type="password" class="form-control" required>
                            <label for="password-linear">Your password</label>
                        </div>
                        <div class="md-form col-12 ml-auto">
                            <input id="password-confirm-linear" type="password" class="form-control" required>
                            <label for="password-confirm-linear">Confirm password</label>
                        </div>
                    </div>
                    <div class="step-actions">
                        <button class="btn btn-sm btn-primary next-step">CONTINUE</button>
                        <button class="btn btn-sm btn-secondary previous-step">BACK</button>
                    </div>
                </div>
            </li>

Grzegorz Bujański staff commented 4 years ago

What do you mean by password confirmation field? You want create something like registration form? You should add second div with input and write own validation which will check is the password fields are the same.

Add comment

Closed

This topic is closed.

FREE CONSULTATION

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

Status

Closed

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB jQuery
MDB Version: 4.14.1
Device: PC
Browser: All
OS: Windows
Provided sample code: No
Provided link: Yes

Inasyah

15Support score
1Questions 1Answers 0Snippets