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

Question

Question

Prevent a user from moving to the next tab until a signature field is completed

asked on November 5, 2015

I am using the script found Here that validates all required INPUT Fields are completed before allowing the user to move on.  I would like to apply this same logic for a Signature Field but I cannot find what the correct selector is.  

Below is the script I'm using:

//Pagination
//hide everything at start
$(document).ready(function() {
  $('.sections, .Submit, .check').hide();

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

//validate whether the required fields are filled
  var valid = true;
 		$('#form1 input, #form1 select, #form1 textarea).filter(':visible').each(function() {
 	if(!$(this).checkValidity()) {valid = false;
 }
 });
if(!valid) { return;} 
  $('.navbar .selected').addClass('completed');
  $('.navbar .selected .check').show();
  
  $('.sections, .Submit').hide();
  $('.navbar').find('.navitem').removeClass('selected');
	if ($(this).hasClass('pos')) {
	$('.section1').show();
              $('.navbar .pos .check .check1, .Submit').hide();
	$('.navbar').find('.pos').addClass('selected');
 }
 	else if ($(this).hasClass('app')) {
 		$('.section2').show();
 		$('.navbar').find('.app').addClass('selected', 'completed');
 }
 	else if ($(this).hasClass('emp')) {
 		$('.section3').show();
 		$('.navbar').find('.emp').addClass('selected');
 }
 
 	else if ($(this).hasClass('skl')) {
 		$('.section4').show();
 		$('.navbar').find('.skl').addClass('selected');
 }
 	else if ($(this).hasClass('ref')) {
 		$('.section5').show();
 		$('.navbar').find('.ref').addClass('selected');
 }
 
 	else if ($(this).hasClass('apps')) {
 		$('.section6, .Submit').show();
 		$('.navbar').find('.apps').addClass('selected');
 }
 	else if ($(this).hasClass('aff')) {
 		$('.section7, .Submit').show();
 		$('.navbar').find('.aff').addClass('selected');
 }
  
 })
 $('.navitem.pos').trigger('click');
    if ($('#Field7').prop('tagName') != 'INPUT')
  {
	$('.navbar').hide();
	$('.navitem').hide();
	$('.Submit').hide();
	$('.sections').show();
  }
});

Thanks,

Nate

0 0

Replies

replied on November 9, 2015

Hi Nate,

Each time a signature is signed, its hidden input field is filled with the signature's image data. Since your function is looking through each visible field, the signature's hidden field won't be selected. I would add an if statement (outside of your 'each' function) that deals only with the signature field. For example:

if ($('.signature input').checkvalidity()){
  //What you want to happen if signature is signed
}

Let me know if this works for you!

Also, in your code, line 10 is missing an apostrophe after textarea, and line 53 is missing a space between '.navitem' and '.pos'

 

0 0
replied on November 10, 2015

Alexander,

First of all, thanks for catching my mistakes - I had it working in production, then made some changes in my stag environment and that's where you saw the errors.  

As for getting the signature side of things to work properly, I cannot figure out where this should be inserted into my code.  I've tried replacing the entire:

$('#form1 input, #form1 select, #form1 textarea).filter(':visible').each(function() {

code and removing the filter(':visible'), and this hid all fields from the beginning.  

My assumption was that this new code should go as a nested if before we check if 'valid' is returned, but I am not savvy enough with JS to figure out exactly where this goes.  Below is what I've tried with little success, hopefully I am just missing another ' !!

//Pagination
//hide everything at start
$(document).ready(function() {
  $('.sections, .Submit, .check').hide();

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

//validate whether the required fields are filled
  var valid = true;
 		$('#form1 select, #form1 input, #form1 textarea').filter(':visible').each(function() {
 	if(!$(this).checkValidity()) {valid = false;
 }
 });
 if($('.signature input').checkValidity()){valid = false;
 }
if(!valid) { return;} 
  $('.navbar .selected').addClass('completed');
  $('.navbar .selected .check').show();
  $('.sections, .Submit').hide();
  $('.navbar').find('.navitem').removeClass('selected');
	if ($(this).hasClass('pos')) {
	$('.section1').show();
              $('.navbar .pos .check .check1, .Submit').hide();
	$('.navbar').find('.pos').addClass('selected');
 }
 	else if ($(this).hasClass('app')) {
 		$('.section2').show();
 		$('.navbar').find('.app').addClass('selected', 'completed');
 }
 	else if ($(this).hasClass('emp')) {
 		$('.section3').show();
 		$('.navbar').find('.emp').addClass('selected');
 }
 
 	else if ($(this).hasClass('skl')) {
 		$('.section4').show();
 		$('.navbar').find('.skl').addClass('selected');
 }
 	else if ($(this).hasClass('ref')) {
 		$('.section5').show();
 		$('.navbar').find('.ref').addClass('selected');
 }
 
 	else if ($(this).hasClass('apps')) {
 		$('.section6, .Submit').show();
 		$('.navbar').find('.apps').addClass('selected');
 }
 	else if ($(this).hasClass('aff')) {
 		$('.section7, .Submit').show();
 		$('.navbar').find('.aff').addClass('selected');
 }
  
 })
 $('.pos').trigger('click');
    if ($('#Field7').prop('tagName') != 'INPUT')
  {
	$('.navbar').hide();
	$('.navitem').hide();
	$('.Submit').hide();
	$('.sections').show();
  }
});
//End Pagination

This gives me the desired result for all fields, just not Signatures.  I do notice that the Signature field gets the 'Please fill out this field' text below it, so its promising, just cannot get it to prevent me from going to the next tab like the other fields!!  Any help is much appreciated.  

Thanks,

Nate

0 0
replied on November 10, 2015

Hi Nate,

On line 10, your javascript finds every select, input, and textarea on the form and selects each one, one at a time. However, line 10 also filters down the results to fields that are visible, so you need to take the signature fields out of that each function (because it will not be checked). Try putting it right above $('.pos').trigger('click'); on line 54. Also, make sure your signature field has the classes "signature" and "navitem".

Also, instead of having "{valid=false}" as the result, just have the new if statement do explicitly what you want to do (like show certain fields or sections, or adding a completed class).

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

Sign in to reply to this post.