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

Question

Question

Set Required Fields Based on Radio Button Chosen

asked on May 17, 2017 • Show version history

With some help, I was able to set up this code where it sets QAE to required if Specification = Yes OR, if I toggle the field, it will turn Required on and off for QAE.

$(document).ready(function(){
//set QAE to required if specification = yes
  $('.specification input').change(function () {
    if ($(this).val() == "Yes")
      {
        $('.qae label').append('<span class="cf-required">*</span>');
        $('.qae input').attr('required', 'True');
      }
    else
      {
        $('.qae .cf-label span.cf-required').remove();
        $('.qae input').removeClass('required').removeAttr('required');
      }
  });
  $(".specification input:checked").each(function(){  
    $(this).trigger('change');
  });
});  //close document.ready

It works great except for one issue. If I set Specification = No, it removes the * but I still see "Please fill out this field." It's no longer required and should not be showing this way. Please assist.

0 0

Replies

replied on May 17, 2017

Hi Gloria,

You can add $('.qae input').trigger('change'); to force field change so the validation would be updated. The script looks like this:

$(document).ready(function(){
//set QAE to required if specification = yes
  $('.specification input').change(function () {
    if ($(this).val() == "Yes")
      {
        $('.qae label').append('<span class="cf-required">*</span>');
        $('.qae input').attr('required', 'True');
      }
    else
      {
        $('.qae .cf-label span.cf-required').remove();
        $('.qae input').removeClass('required').removeAttr('required');
        $('.qae input').trigger('change');
      }
  });
  $(".specification input:checked").each(function(){  
    $(this).trigger('change');
  });
});  //close document.ready

Note, the $('.qae input').trigger('change'); only works for Forms 10.1 and below; for Forms 10.2 and above, use $('.qae input').parsley().validate(); instead.

1 0
replied on May 17, 2017

Instead of using the code could you just create two QAE fields?  One required and one not (different variable names of course)?  Then just show/hide one or the other based on the choices through the standard show/hide rules?

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

Sign in to reply to this post.