Hello,

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*/
$(document).ready(function(){
  $("#form1").change(validate);
  validate();
  $('.cf-next-btn').click(validate);
  $('.cf-prev-btn').click(validate); 
 function validate() {
    if ($("#form1").parsley({excluded:":hidden"}).isValid()) {
      $('.cf-next-btn').prop('disabled',false);
    }
    else {
      $('.cf-next-btn').prop('disabled',true);
    }
  }
})
 

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