Question

Making it mandatory to fill all fields under one tab before continuing

Forms

Updated March 6, 2017

asked on December 19, 2014 • Show version history

From the following article, we've been able to get tabs working on some of our forms:

http://www.laserfiche.com/SolutionExchange/Article/three-ways-to-improve-a-laserfiche-form-with-javascript

I'm wondering if there might be a way, in the future, to have a form like this set up so that if a mandatory field has been missed, the user won't be able to continue to the next tab?

1 0

Answer

SELECTED ANSWER

replied on December 23, 2014

Hello Marty,

You can actually achieve this using Javascript! If you add a "required" class to the fields you want to make sure are filled, you can loop through these, and if any do not have values, you can hide the next button. Here is some sample code to get you started!

$(document).ready(function () {
  	$('.required').on('blur', 'input', isReady);
   	
  function isReady() {
    $('.required input').each(function(){
      if( $(this).val().length === 0 ) {
      $('.action-btn').hide();
    }
    });
	}
	});

0 0

replied on March 6, 2017

Does this script work on 10.2 and when pagination is a progress bar? I have added "required" to the CSS class under the advanced tab for some fields, included the supplied Javascript, and the "Next" button is not hidden. Can someone please help?

0 0

Replies

replied on December 23, 2014

Oh sweet - I'll pass this on. Thanks much!

Marty

1 0

replied on December 29, 2014

You can modify the original codes for configure tabs to archive this, the code modified are below the comment "//"

//hide everything at start
 $('.section1, .section2, .section3, .section4, .Submit').hide();

$('.navitem').on('touchstart click', function () {

//validate whether the required fields are filled
 var valid = true;
 $('#form1 input, #form1 textarea, #form1 select').filter(':visible').each(function() {
 if(!$(this).checkValidity()) {
 valid = false;
 }
 });
 if(!valid) {
 return;
 } 

 $('.section1, .section2, .section3, .section4, .Submit').hide();
 $('.navbar').find('.navitem').removeClass('selected');
 if ($(this).hasClass('info')) {
 $('.section1').show();
 $('.navbar').find('.info').addClass('selected');
 }
 else if ($(this).hasClass('work')) {
 $('.section2').show();
 $('.navbar').find('.work').addClass('selected');
 }
 else if ($(this).hasClass('edu')) {
 $('.section3').show();
 $('.navbar').find('.edu').addClass('selected');
 }
 else if ($(this).hasClass('sup')) {
 $(".section4, .Submit").show();
 $('.navbar').find('.sup').addClass('selected');
 }
 })
 $('.navitem.info').trigger('click');
 });

0 0

You are not allowed to follow up in this post.

Question

Question

Making it mandatory to fill all fields under one tab before continuing

Answer

Replies

Sign in to reply to this post.