@Teodor This is really confusing. Firstly I don’t understand exactly how to ‘invert the condition so it evaluates to true and move the setvalue there’ and why now is it I don’t need the else step where as before you explained to me to put the setvalue in the else step.
Check my code example please …
yes I can see your code example. But how does that show me how to perform what you are saying in the wappler interface. Do I need to add this manually? none of what you are now explaining to me was mentioned when you first showed me adding an inline flow to the next button for this to work.
Well you can do this when entering the expressions in the condition …
Ok @Teodor I’ve tried this, but i must have got it wrong somewhere. I’ve set up the inline flow on a next button and now the next button still works with validation errors.
Whats wrong here? See screen shots
Thanks in advance!
Looking at your condition maybe you want to change || to && as you want input1 not invalid AND input2 not invalid AND input3 NOT invalid etc.
|| means OR, but you need AND.
Also it’s better to paste your code instead of screenshotting it.
Ok thanks. will do
@Teodor because the operators are all now AND / && … If all fields are empty the next button still works. It only disables if some some fields are populated and some are empty. What I don’t understand is when I first set up a inline flow I was using OR / || operators for each value and the setValue in ELSE and they were working.
You were using OR because the condition you needed then was OR - input1 invalid OR input2 invalid OR input3 invalid.
Now you need to check if input1 not invalid AND input2 not invalid AND input3 not invalid.
OK that makes sense so how do I now prevent the next button from working if ALL validated fields are empty?
Well … when they are empty, are you sure they are invalid? Have you set required for them?
Yes all but one have required validation rules. So I assume this is correct.
Screen Recording 2022-03-02 at 10.21.46
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 && rtmApplicationForm.surname.invalid) && rtmApplicationForm.telephone.invalid) && rtmApplicationForm.email.invalid) && rtmApplicationForm.emailConfirm.invalid) && rtmApplicationForm.streetAddress.invalid) && rtmApplicationForm.town1.invalid) && rtmApplicationForm.countyPcd.invalid) && rtmApplicationForm.postCode.invalid) && 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. 
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
Screen Recording 2022-03-02 at 12.01.59
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.