Stepper - Multiple Input Fields per Step - Material Design for Bootstrap

Topic: Stepper - Multiple Input Fields per Step

Emad pro asked 5 years ago

Hello, I am using MDB PRO 4.5.13. Referring to the steppers tutorial (https://mdbootstrap.com/components/bootstrap-steps-stepper): I want to add new input fields per step and make them required. When I do this, (required) does not work, only the first input is seen as required while other fields are skipped. The code is here:

<!-- Step 1: Account info -->

<liclass="step active">

<divclass="step-title waves-effect waves-dark">أولاً: معلومات الحساب</div>

<divclass="step-new-content form">

<divclass="md-form pb-4">

<iclass="fa fa-user-tag prefix"></i>

<inputtype="text"id="form-register-username"class="form-control validate"required>

<labelfor="form-register-username"class="">Username</label>

</div>

<divclass="md-form pb-4">

<iclass="fa fa-envelope prefix"></i>

<inputtype="email"id="form-register-email"class="form-control validate"required>

<labelfor="form-register-email"class="">Email</label>

</div>

<divclass="md-form pb-4">

<iclass="fa fa-lock prefix"></i>

<inputtype="password"id="form-register-password"class="form-control validate"required>

<labelfor="form-register-password"class="">Password</label>

</div>

<divclass="md-form pb-4">

<iclass="fa fa-lock prefix"></i>

<inputtype="password"id="form-register-password2"class="form-control validate"required>

<labelfor="form-register-password2"class="">كرر ال Password</label>

</div>

<divclass="step-actions d-flex justify-content-center">

<buttonclass="waves-effect waves-dark btn btn-sm btn-primary next-step">Next</button>

</div>

</div>

</li>

Bartłomiej Malanowski staff commented 5 years ago

Do you get any console logs?

Add comment

Jakub Strebeyko staff answered 5 years ago

0 0 Best answer

Hi there,

BX3 - thanks for taking time to post the solution here.
Ashraf - has it resolved the issue on your end?
Wish you all an awesome week.

With Best Regards,
Kuba

Add comment

BX3 pro answered 5 years ago

0 0 Best answer

Hi, I had the same problem and as the documentation is really small, I had to check the stepper.js library.

SHORT ANSWER : You need to add a name attribute to your inputs otherwise those are ignored.

I found this code :
<pre class="code-toolbar grey lighten-2 p-3 mb-3">elements: function () { var validator = this, rulesCache = {}; // Select all valid inputs inside the form (no submit or reset buttons) return $(this.currentForm) .find("input, select, textarea, [contenteditable]") .not(":submit, :reset, :image, :disabled") .not(this.settings.ignore) .filter(function () { var name = this.name || $(this).attr("name"); // For contenteditable if (!name && validator.settings.debug && window.console) { console.error("%o has no name assigned", this); } // Set form expando on contenteditable if (this.hasAttribute("contenteditable")) { this.form = $(this).closest("form")[0]; this.name = name; } // Select only the first element for each name, and only those with rules specified if (name in rulesCache || !validator.objectLength($(this).rules())) { return false; } rulesCache[name] = true; return true; }); }</pre>
Which is the function responsible for finding the elements in the form. And as you can see in the filter function, they check each object by name attribute and then put it in a rulesCache object. So if you don't put a name attribute, it will be "undefined" for all your inputs and they will be ignored except the first one ...

Please insert min. 20 characters.

Hi, I had the same problem and as the documentation is really small, I had to check the stepper.js library. SHORT ANSWER : You need to add a name attribute to your inputs otherwise those are ignored. I found this code :

elements: function () { var validator = this, rulesCache = {}; // Select all valid inputs inside the form (no submit or reset buttons) return $(this.currentForm) .find("input, select, textarea, [contenteditable]") .not(":submit, :reset, :image, :disabled") .not(this.settings.ignore) .filter(function () { var name = this.name || $(this).attr("name"); // For contenteditable if (!name && validator.settings.debug && window.console) { console.error("%o has no name assigned", this); } // Set form expando on contenteditable if (this.hasAttribute("contenteditable")) { this.form = $(this).closest("form")[0]; this.name = name; } // Select only the first element for each name, and only those with rules specified if (name in rulesCache || !validator.objectLength($(this).rules())) { return false; } rulesCache[name] = true; return true; }); }

Which is the function responsible for finding the elements in the form. And as you can see in the filter function, they check each object by name attribute and then put it in a rulesCache object. So if you don't put a name attribute, it will be "undefined" for all your inputs and they will be ignored except the first one ...

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: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: 4.5.10
Device: Laptop
Browser: Chrome
OS: Windows 10
Provided sample code: No
Provided link: Yes

Emad

Pro User 5Support score
1Questions 0Answers 0Snippets