Endless validation issues with multi-step form

Yes all but one have required validation rules. So I assume this is correct.

Does it make any difference if you set the wait step to something more than 100ms? For example 500?

I’ve tried the wait step up to 1000. Which just delays it slightly before advancing.

Can you paste the code of your form please?

Here you go. I couldn’t paste the complete form because of too many characters. the next button currently testing is id #next1 in .step-2 . You will notice that #next2 in .step-3 is setup from the old method using ‘Then’ blank and the setValue in else. but can’t be edited as explained previously which prompted the change thus with the current issues. if you need to see more code please say.

<div class="row step step-2" dmx-show="steps.value ==2">

<div class="col-12">
<h2 class="sub-head">Primary contact details:</h2>
</div>
<div class="col-12 col-lg-6">
<div class="form-group row">
  <label for="firstname" id="firstname-label" class="col-sm-3 col-lg-4 col-form-label required">First Name(s)</label>
  <div class="col col-md-9 col-lg-8">
    <input type="text" class="form-control" id="firstName" name="first_name_s" aria-describedby="firstname-label" placeholder="First Name" required="" data-msg-required="Your first name is required.">
  </div>
</div>
<div class="form-group row">
    <label for="surname" id="surname-label" class="col-sm-3 col-lg-4 col-form-label required">Surname</label>
    <div class="col col-md-9 col-lg-8">
        <input type="text" class="form-control" id="surname" name="surname" aria-describedby="surname-label" placeholder="Surname" required="" data-msg-required="Your surname is required.">
    </div>
</div>
<div class="form-group row">
    <label for="telephone" id="tel-label" class="col-sm-3 col-lg-4 col-form-label required">Tel / Mobile</label>
    <div class="col col-md-9 col-lg-8">
        <input type="text" pattern="^(?:0|\+?44)(?:\d\s?){9,10}$" class="form-control" id="telephone" name="telephone" aria-describedby="tel-label" placeholder="Telephone / Mobile" required="" data-msg-required="A contact number is required." data-rule-pattern="^0([1-6][0-9]{8,10}|7[0-9]{9})$" data-msg-pattern="Invalid number.">
    </div>
</div>
<div class="form-group row">
    <label for="email" id="email-label" class="col-sm-3 col-lg-4 col-form-label required">Email</label>
    <div class="col col-md-9 col-lg-8">
        <input type="email" class="form-control" id="email" name="email" aria-describedby="email-label" placeholder="Email" required="" data-rule-email="" data-msg-required="An email address is required.">
    </div>
</div>
<div class="form-group row">
  <label for="emailconfirm" id="confirm-label" class="col-sm-3 col-lg-4 col-form-label required">Email Confirm</label>
  <div class="col col-md-9 col-lg-8">
    <input type="email" class="form-control" id="emailConfirm" name="email_confirm" aria-describedby="confirm-label" placeholder="Email Confirm" required="" data-msg-required="Please confirm your email." data-rule-equalto="email" data-msg-equalto="Email does not match." data-rule-email="true">
  </div>
</div>
</div>
<div class="col-12 col-lg-6">
    <div class="form-group row">
        <label for="streetAddress" id="streetaddress-label" class="col-sm-3 col-lg-4 col-form-label required">Street Address</label>
        <div class="col col-md-9 col-lg-8">
            <input type="text" class="form-control" id="streetAddress" name="street_address" aria-describedby="streetaddress-label" placeholder="Sreet Address" required="" data-msg-required="Your street address is required.">
            <small id="street_help_1" class="form-text text-muted">i.e. House name or number and street name.</small>
        </div>
    </div>
    <div class="form-group row">
        <label for="town1" id="town1-label" class="col-sm-3 col-lg-4 col-form-label required">Town / City</label>
        <div class="col col-md-9 col-lg-8">
            <input type="text" class="form-control" id="town1" name="town1" aria-describedby="town1-label" placeholder="Town / City" required="" data-msg-required="Please provide your town or city.">
        </div>
    </div>
    <div class="form-group row">
  <label for="countyPcd" class="col-sm-3 col-form-label required col-lg-4">County</label>
  <div class="col-sm-9 col-lg-8">
    <select id="countyPcd" name="county_pcd" class="form-control" required="" data-msg-required="Please select your county.">
    <option selected="" value="">Select County</option><option value="Bedfordshire">Bedfordshire</option><option value="Berkshire">Berkshire</option><option value="Berkshire">Blaenau Gwent</option><option value="Bridgend">Bridgend</option><option value="Bristol">Bristol</option><option value="Buckinghamshire">Buckinghamshire</option><option value="Caerphilly">Caerphilly</option><option value="Cambridgeshire">Cambridgeshire</option><option value="Cardiff">Cardiff</option><option value="Carmarthenshire">Carmarthenshire</option><option value="Ceredigion">Ceredigion</option><option value="Cheshire">Cheshire</option><option value="Conwy">Conwy</option><option value="Cornwall">Cornwall</option><option value="Cumbria">Cumbria</option><option value="Denbighshire">Denbighshire</option><option value="Derbyshire">Derbyshire</option><option value="Devon">Devon</option><option value="Dorset">Dorset</option><option value="Durham">Durham</option><option value="East Sussex">East Sussex</option><option value="Essex">Essex</option><option value="Flintshire">Flintshire</option><option value="Gloucestershire">Gloucestershire</option><option value="Greater Manchester">Greater Manchester</option><option value="Gwynedd">Gwynedd</option><option value="Hampshire">Hampshire</option><option value="Herefordshire">Herefordshire</option><option value="Hertfordshire">Hertfordshire</option><option value="Isle of Anglesey">Isle of Anglesey</option><option value="Isle of White">Isle of Wight</option><option value="Kent">Kent</option><option value="Lancashire">Lancashire</option><option value="Leicestershire">Leicestershire</option><option value="Lincolnshire">Lincolnshire</option><option value="London">London</option><option value="Merseyside">Merseyside</option><option value="Merthyr Tydfil">Merthyr Tydfil</option><option value="Middlesex">Middlesex</option><option value="Monmouthshire">Monmouthshire</option><option value="Neath Port Talbot">Neath Port Talbot</option><option value="Newport">Newport</option><option value="Norfolk">Norfolk</option><option value="Northamptonshire">Northamptonshire</option><option value="Northumberland">Northumberland</option><option value="Nottinghamshire">Nottinghamshire</option><option value="Oxfordshire">Oxfordshire</option><option value="Pembrokeshire">Pembrokeshire</option><option value="Powys">Powys</option><option value="Rhonda Cynon Taff">Rhonda Cynon Taff</option><option value="Rutland">Rutland</option><option value="Shropshire">Shropshire</option><option value="Somerset">Somerset</option><option value="Staffordshire">Staffordshire</option><option value="Suffolk">Suffolk</option><option value="Surrey">Surrey</option><option value="Swansea">Swansea</option><option value="Torfaen">Torfaen</option><option value="Tyne and Wear">Tyne and Wear</option><option value="Vale of Glamorgan">Vale of Glamorgan</option><option value="Warwickshire">Warwickshire</option><option value="West Midlands">West Midlands</option><option value="West Sussex">West Sussex</option><option value="Wiltshire">Wiltshire</option><option value="Worcestershire">Worcestershire</option><option value="Wrexham">Wrexham</option><option value="Yorkshire">Yorkshire</option></select>
  </div>
</div>
    <div class="form-group row">
        <label for="countryPcd" id="country-label" class="col-sm-3 col-lg-4 col-form-label">Country</label>
        <div class="col col-md-9 col-lg-8">
            <input type="text" class="form-control" id="countryPcd" name="country_pcd" aria-describedby="country-label" placeholder="Country">
        </div>
    </div>
    <div class="form-group row">
        <label for="postCode" id="postcode-label" class="col-sm-3 col-lg-4 col-form-label required">post/zip code</label>
        <div class="col col-md-9 col-lg-8">
            <input type="text" class="form-control" id="postCode" name="post_code" aria-describedby="postcode-label" placeholder="Post / Zip code" data-rule-pattern="([Gg][Ii][Rr] 0[Aa]{2})|((([A-Za-z][0-9]{1,2})|(([A-Za-z][A-Ha-hJ-Yj-y][0-9]{1,2})|(([A-Za-z][0-9][A-Za-z])|([A-Za-z][A-Ha-hJ-Yj-y][0-9][A-Za-z]?))))\s?[0-9][A-Za-z]{2})" data-msg-pattern="Invalid UK postcode." required="" data-msg-required="A postcode is required.">
        </div>
    </div>
</div>

<div class="col-12 col-lg-6">
<div class="form-group row">
  <label for="flatNoAp" id="flatnumber-label" class="col-sm-3 col-lg-4 col-form-label required">Flat Number</label>
  <div class="col col-md-9 col-lg-8">
    <input type="text" class="form-control" id="flatNoAp" name="flat_no_ap" aria-describedby="flatnumber-label" placeholder="Flat number" required="" data-msg-required="Please enter the flat number for the property seeking RTM."> 
  </div>
<small id="flat_help" class="form-text text-muted ml-3">Note:The flat number entered here should be that of the flat you own in the property seeking RTM.</small>
</div>
</div>
<div class="col-12 col-lg-6">
</div>
<div class="col-break w-100"></div>
<div class="col d-flex justify-content-md-end">
<button id="next1" class="btn-green next" dmx-on:click="run([{run:{action:`rtmApplicationForm.firstName.validate();rtmApplicationForm.surname.validate();rtmApplicationForm.telephone.validate();rtmApplicationForm.email.validate();rtmApplicationForm.emailConfirm.validate();rtmApplicationForm.streetAddress.validate();rtmApplicationForm.town1.validate();rtmApplicationForm.countyPcd.validate();rtmApplicationForm.postCode.validate();rtmApplicationForm.flatNoAp.validate()`}},{wait:{delay:1000}},{condition:{if:`(((((((((rtmApplicationForm.firstName.invalid &amp;&amp; rtmApplicationForm.surname.invalid) &amp;&amp; rtmApplicationForm.telephone.invalid) &amp;&amp; rtmApplicationForm.email.invalid) &amp;&amp; rtmApplicationForm.emailConfirm.invalid) &amp;&amp; rtmApplicationForm.streetAddress.invalid) &amp;&amp; rtmApplicationForm.town1.invalid) &amp;&amp; rtmApplicationForm.countyPcd.invalid) &amp;&amp; rtmApplicationForm.postCode.invalid) &amp;&amp; rtmApplicationForm.flatNoAp.invalid)`,then:{steps:{run:{action:`steps.setValue(steps.value +1)`}}}}}])">Next</button>
</div>
</div>
<div class="row step step-3" dmx-show="steps.value ==3">
<div class="col-12">
<h2 class="sub-head">Qualifying Criteria:</h2>
</div>
<div class="col-lg-6">
<div class="form-group row" id="detached" is="dmx-radio-group">
    <div class="col-12">
        <h4 class="radio-head required">If not structurally detached, is the part of the building seeking RTM vertically divided and capable of being redeveloped independently?</h4>
    </div>
    <div class="col-12">
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" value="Yes" id="yesDet" name="not_detached" required="" aria-describedby="yes-det-label" data-msg-required="Please choose an option.">
            <label class="form-check-label" for="yesDet" id="yes-det-label">Yes</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" value="No" id="noDet" name="not_detached" aria-describedby="no-det-label" required="" data-msg-required="Please choose an option.">
            <label class="form-check-label" for="noDet" id="no-det-label">No</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" value="Unknown" id="unknownDet" name="not_detached" aria-describedby="unknown-det-label" required="" data-msg-required="Please choose an option.">
            <label class="form-check-label" for="unknownDet" id="unknown-det-label">Unknown</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" value="N/A" id="naDet" name="not_detached" aria-describedby="na-det-label" required="" data-msg-required="Please choose an option.">
            <label class="form-check-label" for="naDet" id="na-det-label">N/A</label>
        </div>
        

    </div>
</div>
</div>
<div class="col-lg-6">
    <div class="form-group row" id="twoThirds" is="dmx-radio-group">
        <div class="col-12">
            <h4 class="radio-head required">Are at least two thirds of flats in each block owned by qualifying tenants?</h4>
        </div>
        <div class="col-12">
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" value="Yes" id="yesTwoThirds" name="two_thirds" required="" aria-describedby="yestwothirds-label" data-msg-required="Please choose an option.">
                <label class="form-check-label" for="yesTwoThirds" id="yestwothirds-label">Yes</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" value="No" id="noTwoThirds" name="two_thirds" aria-describedby="notwothirds-label" required="" data-msg-required="Please choose an option.">
                <label class="form-check-label" for="noTwoThirds" id="notwothirds-label">No</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" value="Unknown" id="unknownTwoThirds" name="two_thirds" aria-describedby="unknowntwothirds-label" required="" data-msg-required="Please choose an option.">
                <label class="form-check-label" for="unknownTwoThirds" id="unknowntwothirds-label">Unknown</label>
            </div>
        
        </div>
    </div>
</div>
<div class="col-lg-6">
<div class="form-group row" id="partCommercial" is="dmx-radio-group">
    <div class="col-12">
        <h4 class="radio-head required">If part commercial (i.e. shops or of offices on ground floor). Does the non-residential part exceed 25% of the total floor area?</h4>
    </div>
    <div class="col-12">
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" value="Yes" id="yesPartCommercial" name="part_commercial" required="" aria-describedby="yespartcommercial-label" data-msg-required="Please choose an option.">
            <label class="form-check-label" for="yesPartCommercial" id="yespartcommercial-label">Yes</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" value="No" id="noPartCommercial" name="part_commercial" aria-describedby="nopartcommercial-label" required="" data-msg-required="Please choose an option.">
            <label class="form-check-label" for="noPartCommercial" id="nopartcommercial-label">No</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" value="Unknown" id="unknownPartCommercial" name="part_commercial" aria-describedby="unknownpartcommercial-label" required="" data-msg-required="Please choose an option.">
            <label class="form-check-label" for="unknownPartCommercial" id="unknownpartcommercial-label">Unknown</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" value="N/A" id="naPartCommercial" name="part_commercial" aria-describedby="napartcommercial-label" required="" data-msg-required="Please choose an option.">
            <label class="form-check-label" for="naPartCommercial" id="napartcommercial-label">N/A</label>
        </div>


    </div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group row" id="ifSingleBlock" is="dmx-radio-group">
    <div class="col-12">
        <h4 class="radio-head required">If a single block, do 50% or more leaseholders support RTM?</h4>
    </div>
    <div class="col-12">
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" value="Yes" id="yesSingle" name="if_single" required="" aria-describedby="yessingle-label" data-msg-required="Please choose an option.">
            <label class="form-check-label" for="yesSingle" id="yessingle-label">Yes</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" value="No" id="noSingle" name="if_single" aria-describedby="nosingle-label" required="" data-msg-required="Please choose an option.">
            <label class="form-check-label" for="noSingle" id="nosingle-label">No</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" value="N/A" id="naSingle" name="if_single" aria-describedby="nasingle-label" required="" data-msg-required="Please choose an option.">
            <label class="form-check-label" for="naSingle" id="nasingle-label">N/A</label>
        </div>


    </div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group row" id="ifMultiBlock" is="dmx-radio-group">
    <div class="col-12">
        <h4 class="radio-head required">If Multiple blocks, do 50% or more leaseholders in each block support RTM?</h4>
    </div>
    <div class="col-12">
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" value="Yes" id="yesMultiple" name="if_multiple" required="" aria-describedby="yesmultiple-label" data-msg-required="Please choose an option.">
            <label class="form-check-label" for="yesMultiple" id="yesmultiple-label">Yes</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" value="No" id="noMultiple" name="if_multiple" aria-describedby="nomultiple-label" required="" data-msg-required="Please choose an option.">
            <label class="form-check-label" for="noMultiple" id="nomultiple-label">No</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" value="N/A" id="naMultiple" name="if_multiple" aria-describedby="namultiple-label" required="" data-msg-required="Please choose an option.">
            <label class="form-check-label" for="naMultiple" id="namultiple-label">N/A</label>
        </div>


    </div>
</div>
</div>
<div class="col-break w-100"></div>
<div class="col d-flex justify-content-md-end"><button id="previous1" class="btn-green previous" dmx-on:click="steps.setValue(steps.value -1)">Previous</button>
    <button id="next2" class="btn-green next" dmx-on:click="run([{run:{action:`rtmapplicationform.detached.yesDet.validate();rtmApplicationForm.detached.noDet.validate();rtmApplicationForm.detached.unknownDet.validate();rtmApplicationForm.detached.naDet.validate();rtmApplicationForm.twoThirds.yesTwoThirds.validate();rtmApplicationForm.twoThirds.noTwoThirds.validate();rtmApplicationForm.twoThirds.unknownTwoThirds.validate();rtmApplicationForm.partCommercial.yesPartCommercial.validate();rtmApplicationForm.partCommercial.noPartCommercial.validate();rtmApplicationForm.partCommercial.unknownPartCommercial.validate();rtmApplicationForm.partCommercial.naPartCommercial.validate();rtmApplicationForm.ifSingleBlock.yesSingle.validate();rtmApplicationForm.ifSingleBlock.noSingle.validate();rtmApplicationForm.ifSingleBlock.naSingle.validate();rtmApplicationForm.ifMultiBlock.yesMultiple.validate();rtmApplicationForm.ifMultiBlock.noMultiple.validate();rtmApplicationForm.ifMultiBlock.naMultiple.validate()`}},{wait:{delay:100}},{condition:{if:`((((((((((((((((rtmApplicationForm.detached.yesDet.invalid || rtmApplicationForm.detached.noDet.invalid) || rtmApplicationForm.detached.unknownDet.invalid) || rtmApplicationForm.detached.naDet.invalid) || rtmApplicationForm.twoThirds.yesTwoThirds.invalid) || rtmApplicationForm.twoThirds.noTwoThirds.invalid) || rtmApplicationForm.twoThirds.unknownTwoThirds.invalid) || rtmApplicationForm.partCommercial.yesPartCommercial.invalid) || rtmApplicationForm.partCommercial.noPartCommercial.invalid) || rtmApplicationForm.partCommercial.unknownPartCommercial.invalid) || rtmApplicationForm.partCommercial.naPartCommercial.invalid) || rtmApplicationForm.ifSingleBlock.yesSingle.invalid) || rtmApplicationForm.ifSingleBlock.noSingle.invalid) || rtmApplicationForm.ifSingleBlock.naSingle.invalid) || rtmApplicationForm.ifMultiBlock.yesMultiple.invalid) || rtmApplicationForm.ifMultiBlock.noMultiple.invalid) || rtmApplicationForm.ifMultiBlock.naMultiple.invalid)`,else:{steps:{run:{action:`steps.setValue(steps.value +1)`}}}}}])">Next</button>
</div>

</div>

@Teodor one thing I have just noticed is when all fields are populated The next button does NOT advance to next step. so its kind of back to front in its function. when all fields are empty it advances. when all fields are full it does not advance. :see_no_evil:

OK @Teodor i’ve figured out what’s happened here.
I previously manually changed the condition…
from

inputName.invalid && inputName2.invalid

to

!inputName.invalid && !inputName2.invalid

When i went in to change the operators from || to && it didn’t hold the previous edit and reverted it back to how it was before. see video

So I guess either way for me to have this function on multi-step form, as it stands I would need to use && operators and then manually update the condition

from

inputName.invalid && inputName2.invalid

to

!inputName.invalid && !inputName2.invalid

Subsequently I could just leave the condition and just update the operators to OR / || and then from the markup just change ‘then’ to ‘else’ . Both methods seem to work.