Question

Hide Next Button until required fields are complete

Forms

Updated April 19

asked on April 16

Hello,

I've used the code below on many forms to suppress the Next button until all required fields are completed on the page, and it works well. However, I've found that it doesn't work when the last field on the page is an upload field. Has anyone run across this before?

Thanks in advance!

$("#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').show();
}
else {
$('.cf-next-btn').hide();
}
}

0 0

Answer

SELECTED ANSWER

replied on April 18

Hi Sarah,

The File upload field is a little complicated as it contains a hidden <input type="file"> element and a visible <input type="button">element. In your script, you are actually validating those fields that are not hidden here $("#form1").parsley({excluded:":hidden"}).

When you simply run $("#form1").parsley({excluded:":hidden"}) in the console, you'll see the fields that's being validated don't include the hidden <input type="file"> element, but just the visible button. For example,

Thus I think you may need extra lines to validate the file upload fields specifically, something like

$('.file-drop-area').parent().find('input[type=file]').each(function(i, ele){
$(ele).parsley().validate();
})

1 0

replied on April 19

Thank you Zhiyong! I rearranged the fields as a workaround, but the flow is awkward and I'm going to work this in today

0 0

Replies

replied on April 17

Which version of Forms are you using?

In the Modern Designer in Forms 11, you can Hide or Disable the Next button using Field Rules.

0 0

replied on April 17

Hi Jennifer and thanks for the response. Unfortunately, this is happening with a form that utilizes the classic form designer.

0 0

You are not allowed to follow up in this post.

Question

Question

Hide Next Button until required fields are complete

Answer

Replies

Sign in to reply to this post.