Question

How to make all fields in a section required

Forms Ideas

Updated July 25, 2016

asked on July 1, 2016 • Show version history

Hello,

I have an application form that has different sections. I would like to make the sections conditionally required based on another field. My question is, how can I make all the fields in a section required? I have scripts that show you how to make specific fields required but I would like to make the entire section required. I have 60+ fields in some of my sections so I cant do it based on each field.

Thanks

0 0

Answer

SELECTED ANSWER

replied on July 1, 2016

Better yet, if you're going to be using a script anyway, just make use of the CSS Selectors to select all the children of the target section. Suppose you add the CSS Class "ReqSection" to your section. Then you could add the following to your javascript:

$(document).ready(function () {
  $('.ReqSection input').each(function () {
    $(this).attr('required', 'True').addClass('required');
    $(this).closest('li').find('label').append('<span class="cf-required">*</span>');
  })
});

Of course, if you have dropdowns or multiline fields, you would need to account for that by repeating that process for each <textarea> or <select> element as well.

0 0

Replies

replied on July 1, 2016 • Show version history

you can add a class to those 60+ fields, and set that class in the script so it will make all 60+ fields required.

0 0

SELECTED ANSWER

replied on July 1, 2016

$(document).ready(function () {
  $('.ReqSection input').each(function () {
    $(this).attr('required', 'True').addClass('required');
    $(this).closest('li').find('label').append('<span class="cf-required">*</span>');
  })
});

Of course, if you have dropdowns or multiline fields, you would need to account for that by repeating that process for each <textarea> or <select> element as well.

0 0

replied on July 8, 2016

Scott,

Thank you, I tried using your code to add the fields in the section to be required based on a specific criteria but it doesn't work. Here is the script, can you please help me identify what is wrong. It adds the asterisk to the fields but does not make them required as i am able to submit the form without completing the filling out the fields. AB_Section is the CSS class for my section. I have a drop-down where I have if a specific section is selected to execute a couple features, those work, but when i added the required piece to it, that part doesn't work.

$(document).ready(function(){

$('.AppType select').change(function(){

if ($(this).val()=='AB')

{

$('.AB_Section').show();

$('.AB_Section').closest('li').find('label').append('<span class="cf-required">*</span>'); $('.AB_Section').attr('required', 'True').addClass('required'); $('.OuterSection.collapsible').trigger('click');

$('.OuterSection').show();

}

else

{

$('.AB_Section').hide();

$('.OuterSection').hide();

$('.AB_Section').removeAttr('required', 'True').removeClass('required');

}

});

0 0

replied on July 25, 2016

For anyone that may find this useful, i was missing the word 'input' in the third line of each clause.

If clause: $('.AB_Section input').attr('required', 'True')

Else Clause: $('.AB_Section input').removeAttr('required', 'True')

1 0

replied on July 1, 2016

I think that is a great feature request as you can already make a section read-only.

0 0

replied on July 5, 2016

I added it as a feature request for the product.

1 0

You are not allowed to follow up in this post.

Question

Question

How to make all fields in a section required

Answer

Replies

Sign in to reply to this post.