stepper data validator gets called twice .. - Material Design for Bootstrap

Topic: stepper data validator gets called twice ..

nskalis free asked 5 years ago

given the html below

AsPathGroupIx helps you rollout a configlet about multiple as-path regexp

    <div id="divinputAsPathGroupIx" name="divinputAsPathGroupIx">
        <form name="inputAsPathGroupIx" class="inputAsPathGroupIx">
            <div class="row">

                <div class="col-12">
                    <select name="unit" class="mdb-select md-form colorful-select dropdown-primary">
                        <option value="" disabled selected>unit</option>
                        <option value="attributes" data-secondary-text="">attributes</option>
                    </select>
                    <label class="mdb-main-label">unit</label>
                </div>

                <div class="col-12">
                    <select name="spec" class="mdb-select md-form colorful-select dropdown-primary">
                        <option value="" disabled selected>spec</option>
                        <option value="replace" data-secondary-text="">replace</option>
                        <option value="delete" data-secondary-text="">delete</option>
                    </select>
                    <label class="mdb-main-label">spec</label>
                </div>

                <div class="col-12">
                    <select name="groups" class="mdb-select md-form colorful-select dropdown-primary" multiple>
                        <option value="" disabled selected>groups</option>
                        <option value="BOGON_ASNS_IN">BOGON_ASNS_IN</option>
                        <option value="BOGON_ASNS_OUT">BOGON_ASNS_OUT</option>
                    </select>
                    <label class="mdb-main-label">groups</label>
                </div>

            </div>
            <br><br><br>
        </form>

        <div class="step-actions">
            <button class="waves-effect waves-dark btn btn-sm btn-block btn-primary next-step" data-validator="validateAsPathGroupIx" data-feedback="triggerActions"><i class="fas fa-rocket left"></i>APPROVE</button>
        </div>

    </div>

</div>

when clicking on the button APPROVE the fnuction gets called twice

function validateAsPathGroupIx() {
    console.log(document.forms['inputAsPathGroupIx']);
    return true;
}

enter image description here

Can you advise on what is going wrong ?

Grzegorz Bujański free commented 5 years ago

Hi. Create please snippet here: https://mdbootstrap.com/snippets. I will look at this. Best, Grzegorz

nskalis free commented 5 years ago

ok, I added the stepper related html, but the form doesn't appear correctly on the snippet editor.. (everything is black and the drop down list doesn't work), this is the whole html though: https://mdbootstrap.com/snippets/jquery/nskalis/1791214 can you please advise if that is sth you can work with ?

Grzegorz Bujański free commented 5 years ago

You need initialize materialSelect and then the form should appear correctly. Unfortunately your snippet doesn't work. After i click validate nothing happened

nskalis free commented 5 years ago

I am sorry can you provide an example with select using your snippet editor ??? clearly the problem is with the editor itself, it doesn't recognise jQuery. I initialised also the stepper, if you copy/paste the snippet locally and call WOW.init() it will work.. I would appreciate an non-24h delay in such simple questions

Grzegorz Bujański free commented 5 years ago

When I run your code locally still nothing happened after click validate. Can you send working demo to my mail? g.bujanski@mdbootstrap.com

nskalis free commented 5 years ago

thank you! sent.

Grzegorz Bujański free commented 5 years ago

It's took me a while, but I finded a reason of this issue. Here is the problem: data-validator="validateAsPathGroupIx" data-feedback="triggerActions" . When you click approve button $('#stepper-navigation').nextStep() calls again validateAsPathGroupIx(). I will add a task for my team and we are find the reason for this behavior and fix this.

nskalis free commented 5 years ago

thank you! should it be expected in the next release (and when is that expected) ? together with https://mdbootstrap.com/support/jquery/how-to-append-an-existing-form-with-select-form-fields/ really prohibit the use of the stepper component ?

Grzegorz Bujański free commented 5 years ago

Hard to say when this issue will be fixed. We will try to solve it asap. But this problem: https://mdbootstrap.com/support/jquery/how-to-append-an-existing-form-with-select-form-fields/ has been resolved in 4.14.0.

nskalis free commented 5 years ago

great! that was more important :)

Add comment

nskalis free answered 5 years ago

0 0 Best answer

hi,

would you be so kind to provide an update about when the issue of calling twice the data-validator function ?

Here is the problem: data-validator="validateAsPathGroupIx" data-feedback="triggerActions" . When you click approve button $('#stepper-navigation').nextStep() calls again validateAsPathGroupIx(). I will add a task for my team and we are find the reason for this behavior and fix this.

Grzegorz Bujański free commented 5 years ago

Hard to say. We have planned tasks for the near future. We will try to solve this problem in the meantime. But I am not able to indicate at the moment the specific or approximate date to resolve this issue.

Add comment

Write

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.12.0
Device: all
Browser: all
OS: all
Provided sample code: Yes
Provided link: No

Tags

stepper data-validator

About author

nskalis

135Support score
8Questions 9Answers 2Snippets