0

I have an episerver Multi step form. Except for the last step that has an optional comment input and the submit button all the steps includes mandatory fields. If I try to manipulate the html on the browser to make submit button visible, the validation except in the 1st step fails and I am able to submit the form.

Shouldn't validation fail in such a scenario? Do I have to explicitly use the dependencies tab? I have gone through episerver documentation for multistep scenario but couldn't find any thing close to how validation works.

Any inputs on how episerver multi step form validation works is appreciated.

Below is the rendered HTML of the last step with Submit button. Clicking the submit button, prompts me to fill in the details for the 1st step which on providing the required details & again clicking the submit ,the data gets posted & the confirmation message is displayed.

***`

<section id="__field_7239" data-f-type="step" data-f-element-name="__field_7239" class="Form__Element FormStep Form__Element--NonData" data-f-stepindex="5" data-f-element-nondata="">
            
<h3 class="FormStep__Title">Additional Information</h3>
<aside class="FormStep__Description"></aside>
<!-- Each FormStep groups the elements below it til the next FormStep -->
<div class="Form__Element FormTextbox FormTextbox--Textarea" data-f-element-name="__field_7201" data-f-modifier="textarea" data-f-type="textbox">
    <label for="e32739e7-04e5-47d0-b9c5-0c4d6d0e1644" class="Form__Element__Caption">Message</label>
    <textarea name="__field_7201" id="e32739e7-04e5-47d0-b9c5-0c4d6d0e1644" class="FormTextbox__Input" placeholder="Message" data-f-label="Message" data-f-datainput="" aria-describedby="__field_7201_desc" aria-invalid="false"></textarea>
    <span class="Form__Element__ValidationError" data-f-linked-name="__field_7201" data-f-validationerror="" id="__field_7201_desc" style="display:none"></span>
</div>
<button id="bf44f17c-3613-404c-b02f-5968d66dbc05" name="submit" type="submit" value="bf44f17c-3613-404c-b02f-5968d66dbc05" data-f-is-finalized="true" data-f-is-progressive-submit="true" data-f-type="submitbutton" data-f-element-name="__field_7184" class="Form__Element FormExcludeDataRebind FormSubmitButton">
        Submit    
</button>
</section>

***`

0 Answers0