Question

Setting Field Focus After Submit

Forms

Updated September 28, 2022

asked on September 28, 2022 • Show version history

We have a form that is somewhat complicated to complete, and we've added functionality to allow the initiator to route to someone else to review/edit (this is a loop, and they can send to as many people as they want before the process continues).

If routing to someone else to assist with completing the form, we want to ignore all the required fields on the form *EXCEPT* for the field where they enter the name of the user the form should route to.

The only part of this that's throwing us for a loop is setting the focus on that field. It works in Preview, but when actually clicking Submit in a live process, it's putting the focus back on the first required field on the form. We believe this is because of the post-submit validation that's done (when the form looks for required fields).

Here's our code:

$(document).ready (function () {
/* Ignores required fields when submitting for review */
  
  $(".action-btn.Submit").on('click', function() {  
    
    let routingChoice = $('.routingSelection input:checked');
    let routingTo = $('.routingTo select');
    
    
    /* if they did not choose Done! and have actually made a routing choice */    
    if(routingChoice.val() !== 'Done!'&& routingChoice.length >0 )    
    {
      /* if they have chosen someone to route to */
      if(routingTo.val().length>0){
        $("*[required]").each(function() { 
          
          $(this).removeClass('required');
          $(this).removeAttr('required');
        }); 
      }
      else/* nobody was chosen for route to */
      {        
        routingTo.trigger('focus');
      };
     
    };
    

  }); 

}); /* END: $(document).ready (function () */

Any ideas?

If we can't get this to work, our alternative will be to just add an alert telling them which field they need to complete to continue (less ideal).

Thanks in advance!

field_focus.JPG (22.36 KB)

| Download

1 0

Answer

SELECTED ANSWER

replied on September 28, 2022 • Show version history

I took your idea of adding a class as needed and ran with it. This is what I came up with. First few tests seems to be working. I'm running more tests now.

$(document).ready (function () {

/* Ignores required fields when submitting for review */
  
  $(".action-btn.Submit").on('click', function() {  
    
    let routingChoice = $('.routingSelection input:checked');
    
    reinstateRequirements();
    
    /* if they did not choose Done! and have actually made a routing choice */    
    if(routingChoice.val() !== 'Done!'&& routingChoice.length >0 )    
    {
      /* remove requied for all but the routingTo selection*/
      removeRequirements();     
    };    

  }); 
  
  /* Reinstate the required fields if the rejection failed. */
  function reinstateRequirements() {
    $('.removedRequirement').each(function() {
      $(this).addClass('required');
      $(this).attr('required', true);
      $(this).removeClass('removedRequirement');
    });
  };
  
  /* Remove the required fields if the rejection failed. */
  function removeRequirements() {
    let routingTo = $('.routingTo select');
    $("*[required]").each(function() { 
      $(this).removeClass('required');
      $(this).removeAttr('required');
      $(this).addClass('removedRequirement');
    }); 
    
    /* Route to is always required */
    routingTo.addClass('required');
    routingTo.attr('required', true);
    routingTo.removeClass('removedRequirement');
  };
  

}); /* END: $(document).ready (function () */

1 0

Replies

replied on September 28, 2022

How about doing the code that removes the required class and attribute from all fields on the form, except the one field that you still want them to complete?

I have a similar bit of code that does this on a form if the Reject button is clicked (as opposed to Submit or Approve). It removes the required value from all fields unless they have a class name of alwaysRequired on the form. Then it re-runs the validation.

$(document).ready(function () {
         
  //Remove required values from most fields when form is rejected.
  $(".action-btn.Reject").on('click', function() {    
    $('*[required]').each(function() { 
      if(!$(this).closest('.form-q').hasClass('alwaysRequired')) {
	    $(this).removeClass('required')
        $(this).removeAttr('required');
	  }
    }); 
    $('#form1').parsley().validate();
  });
 
});

End result looks like this (this screenshot has 4 required fields, only one of which has the alwaysRequired class on it. The other 3 fields can now be submitted and processed even if they are blank, but the one field with alwaysRequired field stays required. Note however, that this removes the required setting on the fields, and doesn't put it back in place, so you need to have something else in place if you want to add those back in when it fails to process.

2 0

View 2 previous replies

replied on September 28, 2022

We thought of that, but this is what stopped us from going that route:

1) user selects to route to another user but leaves the name field blank

2) they click Submit and they're stopped with the message that the name is required

3) they change their mind and decide to just submit as-is

Now none of the fields are required.

We also considered adding "isRequired" (or similar) classes to all the required fields so we could toggle the requirement back and forth. That just seemed like a pain when it works so well the other way.

We just can't set the focus on that field.

0 0

replied on September 28, 2022 • Show version history

Here's a way to do the same thing, but automatically reinstate the required fields if the form doesn't process with the Reject button. So it'll flag the one missing field as required, and then after a few seconds it reapplies the requirement to all fields.

$(document).ready(function () {
         
  //Remove required values from most fields when form is rejected.
  $(".action-btn.Reject").on('click', function() {    
    var noErrors = true; 
    $('*[required]').each(function() { 
      if(!$(this).closest('.form-q').hasClass('alwaysRequired')) {
        $(this).removeClass('required');
        $(this).removeAttr('required');
        $(this).addClass('removedRequirement');
      }
    }); 
    $('#form1').parsley().validate();
    $('.parsley-error').each(function() {
      noErrors = false; 
    });
    if (!noErrors) {
      setTimeout(reinstateRequirements, 2000);
    }
  });
  
  //Reinstate the required fields if the rejection failed.
  function reinstateRequirements() {
    $('.removedRequirement').each(function() {
      $(this).addClass('required');
	  $(this).attr('required', true);
      $(this).removeClass('removedRequirement');
    });
  }
 
});

I've tested that code in my system and it worked as expected for me.

Combining your code and my code should yield something like this (which I haven't tested). This may not work for your purposes, but maybe it will.

$(document).ready (function () {
/* Ignores required fields when submitting for review */
  
  $(".action-btn.Submit").on('click', function() {  
    
    let routingChoice = $('.routingSelection input:checked');
    let routingTo = $('.routingTo select');
    
    /* if they did not choose Done! and have actually made a routing choice */    
    if(routingChoice.val() !== 'Done!'&& routingChoice.length >0 )    
    {
      /* if they have chosen someone to route to */
      if(routingTo.val().length>0){
        var noErrors = true; 
        $('*[required]').each(function() { 
          if(!$(this).closest('.form-q').hasClass('alwaysRequired')) {
            $(this).removeClass('required');
            $(this).removeAttr('required');
            $(this).addClass('removedRequirement');
          }
        }); 
        $('#form1').parsley().validate();
        $('.parsley-error').each(function() {
          noErrors = false; 
        });
        if (!noErrors) {
          setTimeout(reinstateRequirements, 2000);
        }
      }     
    }
  });

  //Reinstate the required fields if the rejection failed.
  function reinstateRequirements() {
    $('.removedRequirement').each(function() {
      $(this).addClass('required');
      $(this).attr('required', true);
      $(this).removeClass('removedRequirement');
    });
  }

}); /* END: $(document).ready (function () */

2 0

SELECTED ANSWER

replied on September 28, 2022 • Show version history

I took your idea of adding a class as needed and ran with it. This is what I came up with. First few tests seems to be working. I'm running more tests now.

$(document).ready (function () {

/* Ignores required fields when submitting for review */
  
  $(".action-btn.Submit").on('click', function() {  
    
    let routingChoice = $('.routingSelection input:checked');
    
    reinstateRequirements();
    
    /* if they did not choose Done! and have actually made a routing choice */    
    if(routingChoice.val() !== 'Done!'&& routingChoice.length >0 )    
    {
      /* remove requied for all but the routingTo selection*/
      removeRequirements();     
    };    

  }); 
  
  /* Reinstate the required fields if the rejection failed. */
  function reinstateRequirements() {
    $('.removedRequirement').each(function() {
      $(this).addClass('required');
      $(this).attr('required', true);
      $(this).removeClass('removedRequirement');
    });
  };
  
  /* Remove the required fields if the rejection failed. */
  function removeRequirements() {
    let routingTo = $('.routingTo select');
    $("*[required]").each(function() { 
      $(this).removeClass('required');
      $(this).removeAttr('required');
      $(this).addClass('removedRequirement');
    }); 
    
    /* Route to is always required */
    routingTo.addClass('required');
    routingTo.attr('required', true);
    routingTo.removeClass('removedRequirement');
  };
  

}); /* END: $(document).ready (function () */

1 0

replied on September 28, 2022

This did the trick!!!! Thank you to Matthew and Genny for getting us where we wanted to be. :-)

2 0

replied on September 28, 2022

Glad that worked. And I really like the way that @████████ had it add the required values back onto the field at the start of the Submit process instead of using a timed function like I did.

2 0

replied on September 28, 2022

What if the radio button is selected "Done" and you hide and ignore the required field Route to and allow the user to submit that way?

0 0

replied on September 28, 2022

The two options are:
1) Done!
if selected, the "Route To" field is hidden, all required fields remain required and Submit functions as usual
2) Send this form to another user for review
if selected, the "Route To" field needs to be the only field on the form that remains required. The code we have accomplishes this.

We just need to figure out how to put the "Route To" field in focus if it's left blank while "Send this form to another user for review" is selected when the Submit button is clicked (while ignoring the other required fields).

0 0

replied on September 28, 2022

OK. I misunderstood...

0 0

replied on September 28, 2022

Here is my solution:

$(document).ready(function() {

/* Removes the required attribute from all fields that we may want to leave blank if the radio value is 'Send this form to another user for review' and when the submit button is clicked if the Route To field is empty, it will focus on that field*/
$('.RadioChoice input').on('click', function(e){
if(e.target.value=='Send this form to another user for review'){
$('.removeRequired input').removeAttr('required');
}
else

/* Makes all of the "required" fields "required" and when the submit button is clicked, the focus will go to the first field that is required but doesn't have anything in it.
{
$('.removeRequired input').attr('required','True');
}
});

});

The Route To field is hidden when radio button Done! is selected, thus not required then.

0 0

replied on September 28, 2022

Is there a way to capture after validation is finished?

0 0

replied on September 28, 2022

If anyone knows the answer, this may give us what we're looking for.

0 0

You are not allowed to follow up in this post.

Question

Question

Setting Field Focus After Submit

Answer

Replies

Sign in to reply to this post.