Stepper - Multiple Input Fields per Step


Topic: Stepper - Multiple Input Fields per Step

Ashraf pro asked 6 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 pro premium commented 6 years ago

Do you get any console logs?


BX3 pro answered 6 years ago

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 ...

Jakub Strebeyko staff answered 6 years ago

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


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: 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
Tags