Conditionally Required Fields in Forms

SELECTED ANSWER

replied on June 17, 2021

I have several forms where I have a field that I want always visible, but only sometimes required. Here's some simple javascript to help with that.

Create a drop-down field, give it the 3 options you listed as required (Consultant Access, Vacation Coverage or New Temporary Employee) along with some other options as well. Give it the CSS class name of requiredSource.

Create a single-line field, give it the CSS class name of requiredDestination.

Add this Javascript:

$(document).ready(function () {
  
  //when the dropdown field with requiredSource class is changed:
  //If it's value is Consultant Access, Vacation Coverage or New Temporary Employee then set the
  //single line field with requiredDestination class as required, otherwise set it not required.
  $('.requiredSource select').change(function() {
    if($(this).val() == 'Consultant Access' || $(this).val() == 'Vacation Coverage' || $(this).val() == 'New Temporary Employee')
    {
      $('.requiredDestination').each(function() {
        $(this).find('input').attr('required', 'true');
        $(this).find('input').addClass('required');
        $(this).find('.cf-label').find('span').find('span').first().append('<span class="cf-required">*</span>');
      });
    }
    else
    {
      $('.requiredDestination').each(function() {
        $(this).find('input').removeAttr('required');
        $(this).find('input').removeClass('required');
        $(this).find('.cf-label').find('.cf-required').remove();
        $(this).find('input').parsley().validate();
      });
    }
  });
  
});

Now the single line field is required when the drop-down field has one of those three options selected.

Otherwise it is optional.

5 0

View 1 previous reply

replied on June 17, 2021

@████████ Check out what you can do when you use .prop instead of .attr and take advantage of jQuery's .toggle method.

$(document).ready(function () {
  $('.requiredDestination .cf-label > span').append('<span class="cf-required">*</span>');
  $('.requiredDestination .cf-required').hide();
  
  // set change event on dropdown
  $('.requiredSource select').on('change',function() {
    var reqList = ['Consultant Access','Vacation Coverage','New Temporary Employee'];
    var required = reqList.includes($(this).val());
    
    $('.requiredDestination input').prop('required',required);
    $('.requiredDestination .cf-required').toggle(required);
    
    if (!required) $('.requiredDestination input').parsley().validate();
  });
});

3 0

replied on June 17, 2021 • Show version history

Always learning new stuff from you @████████

I freely admit my code is not the most efficient, I find something that works and I just copy/paste it a million times. haha

I've never used toggle before, I'll have to play around with that one.

1 0

replied on June 17, 2021 • Show version history

@████████ I totally understand, and I still learn new things all the time lol.

I still copy/paste stuff from old forms that probably isn't the most "efficient" approach, but sometimes if you know something works then that's good enough, especially when time is a factor.

2 0

Question

Question

Conditionally Required Fields in Forms

Answer

Replies

Sign in to reply to this post.