You are viewing limited content. For full access, please sign in.



Enable/disable Next and Submit buttons and mandatory fields

asked on June 30, 2019 Show version history


I have a form with several tabs and I would like to make sure user cannot move to the next tab before all the mandatory fields are filled.

I did some research on the LF answers and tried few Javascript codes. But it never works 100%. So frustrating !

Here are my last try :

/* To enable Next button once mandatory fields have been completed*/
 function validate() {
    if ($("#form1").parsley({excluded:":hidden"}).isValid()) {
    else {

My forms have 5 tabs. The code does work well for the two first tabs.

On Tab 3, if user ticks yes on Load status, another columns appears to dowload a photo. It is a mandatory field but if the user ticks Yes and does not add a photo, he can still move to the next tab. First issue.

Then on Tab 4, Next button is always enable and user can move to tab 5 without upload anything.

If I do not upload photos in the mandatory fields on Tab 4 and click on Submit, it does not bring me back on the tab with missing informations and give me an error message.


My submit button was initially on Tab 4. I initially tried to add the same script for disabling the Submit button if the fields of tab 4 are not completed and it did not work. I then thought that putting Submit on another tab will fix it because of the rule on the Next button. But it does not as the Next button on Tab 4 is always enable...


I would really appreciate any help ! I will start losing some hairs with this form ^^

Thanks a lot

Tab 1.png
Tab 2.png
Tab 3.png
Tab 4.png
Tab 5.png
Error message.png
Tab 1.png (115.11 KB)
Tab 2.png (104.71 KB)
Tab 3.png (115.6 KB)
Tab 4.png (108.85 KB)
Tab 5.png (94.92 KB)
0 0


replied on July 1, 2019

I had the same issue.  Instead of using Javascript, I created a Submit button using Custom HTML field.  Then I coped out the CSS from the original submit button and applied it the Custom HTML field using CSS and Javascript.  I totally hide the native Submit button (using Javavscipt) and show the Custom HTML Submit button using Field Rules.

I can upload a sample of the Custom HTML if you need it.

0 0
replied on July 1, 2019

Add this to a Custom HTML field:

<button type="submit" class="action-btn">Submit</button>

Add button (class name) to the CSS class of the HTML Custom Field


Then add this to the CSS and Javascript field:

.action-btn {
  color: #0e3837;
    font-family: Arial;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    text-decoration: none;
    border-color: #0e3837;
    background: #a2f434;
    border-width: 1px;
    border-style: solid;
      display: flex; 
      justify-content: center;

.button {
      display: flex; 
      align-items: center;
      justify-content: center;

0 0
replied on July 1, 2019

Hi Thomas,

Thanks for your suggestion. Unfortunately I cannot do the same as I cannot specify in the Field rules to show the Custom HTML Submit button when the photos on the last page have been uploaded (it is not something I can select, ie, "Fully loaded container" is not empty).

It would have been a great way to make it work !

0 0
replied on July 8, 2019


Sorry for the repost but I am kind of stuck with this issue. This form will be on test in the next 2 weeks and the "security" to have all the required data on each tab before moving to the next one is really important.

I have tried some script from this post but still enables to archieve what we want:

Any advice from the Laserfiche team?



0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.