Linear Stepper validation problem

Topic: Linear Stepper validation problem

Bruno V Werneck free asked 5 years ago

Hello there! Given the following code:

<div class="form-check">
        <input type="checkbox" class="form-check-input validate" required id="acceptTOSCheckbox"
               onclick="$('#acceptTOSButton').toggleClass('disabled btn-grey')">
        <label class="form-check-label" for="acceptTOSCheckbox">I Agree to the Terms of Service &amp; Privacy
            Policy.</label>
    </div>
</div>
<div class="step-actions">
    <button id="acceptTOSButton" type="button"
            class="waves-effect waves-dark btn btn-sm btn-primary next-step disabled btn-grey"
            onclick="">Next
    </button>
</div>

I get this error in the console when I click the Next button: Uncaught TypeError: Cannot read property 'type' of undefined at t.validator.elementValue (stepper.min.js:1) at t.validator.check (stepper.min.js:1) at t.validator.checkForm (stepper.min.js:1) at t.validator.form (stepper.min.js:1) at w.fn.init.valid (stepper.min.js:1) at w.fn.init.$.fn.isValid (stepper.min.js:1) at w.fn.init.$.fn.nextStep (stepper.min.js:1) at HTMLButtonElement.<anonymous> (stepper.min.js:1) at HTMLUListElement.dispatch (jquery-3.3.1.min.js:2) at HTMLUListElement.y.handle (jquery-3.3.1.min.js:2) How do I fix this?

Piotr Glejzer staff commented 5 years ago

Hi Bruno V Werneck,

it looks like that you are using Free version to implement our PRO component. The linear stepper is a pro component so it will be not work in a free version. We are sorry about that. If you want to use steppers and other pro stuff you have to purchase a license to PRO.

Best,

Piotr

Bruno V Werneck free commented 5 years ago

No, I'm using the Pro version. I'm not the buyer, my boss is. I'm just the developer. (Payment confirmation MDB/81646)
I tried to contact contact@mdbootstrap.com and Dawid recommended me to try the support forum.

Piotr Glejzer staff commented 5 years ago

Ok, so which version of MDB Pro do you use?

Bruno V Werneck free commented 5 years ago

Hi Piotr!

Thanks for answering! Currently I'm using version 4.5.13.

We also purchased the Vue pro version but later we realized the Vue version is limited to basic vertical steppers only. We would love to get linear steppers working on Vue as it works on jQuery.

Thanks in advance.

Bruno

Piotr Glejzer staff commented 5 years ago

We very sorry about that its a little bug with type checkbox. We are gonna fix this. We are gonna make some changes with js code steppers in nearly future. But Vue component dosent have that stppers like jquery. Maybe in a future Vue team is gonna create stppers like jquery.

Bruno V Werneck free commented 5 years ago

I see. I'm sad to hear that. We are not going to be able to use the Vue version then.

Anyway, in the jQuery version, is there a way to programmatically navigate through steps via javascript?

Thanks again!

Add comment

MDBootstrap staff answered 4 years ago

0 0 Best answer

Hi, in the code you provided I can not find test whole interaction you are trying to accomplish. Would you reproduce your problem by creating the snippet here: https://mdbootstrap.com/snippets/? I'll try to help you.

Best Regards, Piotr

Add comment

Jeffrey Hermosa free answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi,

I'm having problems with linear stepper, that it won't validate all my inputs. it only validates the first one and ignores the rest.

<div class="row mx-5 mt-n4">
   <div class="md-form col-md-5 mr-auto">
      <input id="txtReferenceNo" type="text" class="validate form-control" required>
      <label for="txtReferenceNo">Reference No</label>
   </div>
</div>
<div class="row mx-5 mt-n4">
   <div class="md-form col-md-5 mr-auto">
      <input id="txtPostalCode" type="number" maxlength="6" class="validate form-control" required>
      <label for="txtReferenceNo">Postal Code</label>
   </div>
</div>
<div class="row mx-5 mt-n4">
   <div class="md-form col-md-2 ">
      <input id="txtLevel" type="text" class="validate form-control" required>
      <label for="txtLevel">Level</label>
   </div>
</div>

Add comment

Piotr Glejzer staff answered 5 years ago

0 0 Best answer

Hello,

I'm already fixed that problem with checkbox, here is a solution:
<pre class="code-toolbar grey lighten-2 p-3 mb-3"><li class="step">

<divclass="row">

<label class="form-check-label"for="acceptTOSCheckbox">I Agree to the Terms of Service &amp; Privacy

Policy.</label>

</div>

<button class="waves-effect waves-dark btn btn-sm btn-primary next-step">CONTINUE</button>

<buttonclass="waves-effect waves-dark btn btn-sm btn-secondary previous-step">BACK</button>

</div>

</li>

</pre>
<div>
<div>and yes, you can navigate steppers via javascript. Our documentation does not contain instruction for that but I will complete docs about this as soon it will be possible.</div>
<div>Steppers has options like:</div>
<div>- isValid();</div>
<div>-  getActiveStep();</div>
<div>- activateStep();
<div>
<div>- deactivateStep();</div>
<div>
<div>- showError();</div>
<div>
<div>- activateFeedback();</div>
<div>- destroyFeedback();
<div>
<div>- resetStepper();</div>
<div>
<div>
<div>- submitStepper();</div>
<div>
<div>
<div>- nextStep();</div>
<div>
<div>
<div>- prevStep();</div>
<div>
<div>
<div>- openStep();</div>
<div>
<div>
<div>- closeAction();</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div>- openAction();</div>
<div>
<div>
<div>- validatePreviousSteps();</div>
<div>
<div>
<div>- validateStep();</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div>- validateStepInput();</div>
<div></div>
</div>
</div>
<div>Best,</div>
<div>Piotr</div>
</div>
</div>
</div>
</div>
</div>

Please insert min. 20 characters.

Hello, I'm already fixed that problem with checkbox, here is a solution:

<li class="step">

<div class="step-title waves-effect waves-dark">Step 2</div>

<div class="step-new-content">

<divclass="row">

<div class="form-check">

<input type="checkbox"class="form-check-input validate"name="acceptTOSCheckbox"requiredaria-required="true"id="acceptTOSCheckbox"onclick="$('#acceptTOSButton').toggleClass('disabled btn-grey')">

<label class="form-check-label"for="acceptTOSCheckbox">I Agree to the Terms of Service &amp; Privacy

Policy.</label>

</div>

</div>

<div class="step-actions">

<button class="waves-effect waves-dark btn btn-sm btn-primary next-step">CONTINUE</button>

<buttonclass="waves-effect waves-dark btn btn-sm btn-secondary previous-step">BACK</button>

</div>

</li>

and yes, you can navigate steppers via javascript. Our documentation does not contain instruction for that but I will complete docs about this as soon it will be possible.

Steppers has options like:

- isValid();

- getActiveStep();

- activateStep();

- deactivateStep();

- showError();

- activateFeedback();

- destroyFeedback();

- resetStepper();

- submitStepper();

- nextStep();

- prevStep();

- openStep();

- closeAction();

- openAction();

- validatePreviousSteps();

- validateStep();

- validateStepInput();

Best,

Piotr

usmanadnan001 pro commented 4 years ago

Hi,

can you provide the full documentation for the stepper?

i need a lot more JS functionality than what you have available in the docs.

Piotr Glejzer staff commented 4 years ago

Docs will be changed because we will update a new version about stepper as soon as possible.

RonnieDavies free commented 4 years ago

Do you have further information about the API? I would like to know how to access the events when a step is opened / closed, and how to set the icon to the validation error icon.

Thanks!

Piotr Glejzer staff commented 4 years ago

I added this information to our jQuery team. They will add more API information to this component as soon as possible.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB jQuery
MDB Version: 4.5.10
Device: All
Browser: Chrome Firefox
OS: All
Provided sample code: No
Provided link: No

Bruno V Werneck

10Support score
2Questions 0Answers 0Snippets