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

Question

Question

dynamically change required fields

Forms
Updated January 4, 2019
asked on May 16, 2014

I am working with a form that has a few required fields. I have these fields initially hidden and disabled when the form starts up. I then show the form based on the users input for a specific value. When I submit the form I am unable to because the hidden/disabled fields are still required. Is there a way to dynamically change the value from required to not required. Given that I am doing this with the checkbox in forms that makes a field required.

 

1 0

Answer

SELECTED ANSWER
replied on May 16, 2014 • Show version history

No. I've slightly adjusted this code; you don't need to make any changes to it. Just put it in the JavaScript section of your CSS and JavaScript page and add the req CSS class to the field that you want to change and the checkbox CSS class to the checkbox that you're using to toggle the behavior. See the Adding classes to fields section of this help page for more information.

 

$(document).ready(function () {
    $('.checkbox input').change(function () {
        if ($(this).is(':checked')) {
            $('.req span.cf-required').remove();
            $('.req input').removeClass('required').removeAttr('required');

        } else {
            $('.req label').append('<span class="cf-required">*</span>');
            $('.req input').attr('required', 'True');
        }
    })
});

Note: This code clears the required status of a given field when a specific checkbox field is checked. If you want your form to do this at a different time or when something else happens, some adjustments will need to be made.

5 0

Replies

replied on May 16, 2014

Yes, this is possible. See the responses to this question for more information.

0 0
View 1 previous reply
replied on May 16, 2014 
$('.checkbox input').change(function () {
  if ($(this).is(':checked')) {
    $('span.cf-required').remove();
    $('.req input').removeClass('required').removeAttr('required');
  } else {
    $('.req label').append('<span class="cf-required">*</span>');
    $('.req input').attr('required', 'True');
  }
});

So would I replace 'this' with the id of the field that I want to change?

 

0 0
SELECTED ANSWER
replied on May 16, 2014 • Show version history

No. I've slightly adjusted this code; you don't need to make any changes to it. Just put it in the JavaScript section of your CSS and JavaScript page and add the req CSS class to the field that you want to change and the checkbox CSS class to the checkbox that you're using to toggle the behavior. See the Adding classes to fields section of this help page for more information.

 

$(document).ready(function () {
    $('.checkbox input').change(function () {
        if ($(this).is(':checked')) {
            $('.req span.cf-required').remove();
            $('.req input').removeClass('required').removeAttr('required');

        } else {
            $('.req label').append('<span class="cf-required">*</span>');
            $('.req input').attr('required', 'True');
        }
    })
});

Note: This code clears the required status of a given field when a specific checkbox field is checked. If you want your form to do this at a different time or when something else happens, some adjustments will need to be made.

5 0
replied on June 2, 2014

This worked for check boxes but how would I apply this to a drop down menu. I am able to disable an input box doing the following:

$(document).change(function() {
  if($('.test input').val() > 5000){
    $('.test2 input').attr('disabled', false);
    $('#q2').show();
  } 
  else{
    $('.test2 input').attr('disabled', true);
    $('#q2').hide();
  }
});

That works when it is a generic input box. In your example you showed a check box how would I do this for a drop down menu. I tried to apply the same method though it still request to fill out the drop down even when disabled and hidden.

 

replied on December 1, 2014

Can this be modified to use with Radio Buttons.  I have a form with a 3 option radio button q43 that I want to use to determine different other fields to be marked as required depending on which of the three options is selected.  Is this possible?

0 0
replied on January 4, 2019

This was very helpful, I was trying to remove the required field from a Signature field for when the Approver wanted to reject the form and send it back for review. I was unable to remove the required field normally but setting the Signature field to not required prior to using JS was the first fix. I then had to use the following code:

 

$(document).ready(function() {
  $('.signatureField label').append('<span class="cf-required">*</span>');
  $('.clearfix input').attr('required','True');
  
  $('.Reject').on('click',function(){
    $('.signatureField span.cf-required').remove();
    $('.clearfix input').removeClass('required').removeAttr('required');
  });
});

 

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

Sign in to reply to this post.

Details
Related Posts
Loading ...