Multi-Page validation error - doesn't switch to the tab with the error (v2024)

PHPMaker General Discussion (PHPMaker)
1

hi,
v2024.16

with JS validation, when there’s an error on a page (multi-page), and the user is on another page and submits from there… if an error occurs, the system doesn’t activate the tab with the error, so the user has to hunt the different tabs to see where the error is.

is this by design or can this be automated?

thanks

2

It should switch, make sure the page is not hidden/disabled. Press F12 in your browser to check for JavaScript error also.

3

thanks, yes you’re right, i did some testing, for 2 other required fields “name” and email address fields for example, it jumped back.

it looks like the issue is on a tab that only contains the password field, it doesn’t select this tab/fields for some reason. it displays the error message, but doesn’t display the fields

image
image448×204 2.63 KB

no errors to note in console.

4

You have “Confirm Password” field, so it is the registration page. The “Confirm Password” is virtual field (not existing in database) so there is no page number associated with it. Probably the JavaScript detected error in that field first so it cannot find the page to switch to. You may try add your page number by data attribute (e.g. data-page="1") to it by Startup Script.

5

thanks, this worked.

did a test in the debugger and added the attribute data-page=“1” to id=“c_password” and went the the 2nd page and tried to register, in which it now moved to page 1 and set focus to the password fields…

6

in multipage custom template edit form i added data-page='1' to field as below code and i don't have any error in console ,but it don't switch to error page what is wrong ?


<div id="r_pcode"  data-page="1" class="col-sm-12 col-md-12 col-lg-4">
            <div class="row">
                <label for="x_FirstName" class="col-sm-4 col-form-label">{{{caption PCode}}}
                   <i data-phrase="FieldRequiredIndicator" class="fa-solid fa-asterisk ew-required"><span class="visually-hidden"></span></i>
                </label>
                <div class="col-sm-8">{{{value PCode}}}</div>
            </div>
        </div>
7

See Custom Templates -> Important Notes:

If Multi-Page (see Table Setup) is enabled for the page, the Custom Templates should include templates for all pages using {{{page_n}}} and {{{/page_n}}}, and each field must be placed in the same page as in the original script.

1 Like
8

Thank for your attention , so i found the problem ,i must set

LockTabs to false

in this set :

currentForm.multiPage.set({
          LastPageSubmit: true, // Enable submit button for the last page only
            HideDisabledButton: true, // Hide disabled submit button
           // HideInactivePages: true, // Hide inactive pages
           // HideTabs: true, // Hide all tabs
            ShowPagerBottom: true, // Show pager at bottom
            LockTabs: true ; // Set inactive tabs as disabled
 });