Question

Jquery radio button required asterisk

Forms Version 10 How To

Updated December 23, 2024

asked on October 3, 2022

I'm trying to make a radio and checkbox field required with jquery and when I do it makes the choices required. All I want is the label and to make the field required like normal. Code and screenshot attached.

$('#q14 input').change(function () {

if ($(this).val()=="New Employee") {

$('#q3 label').append('<span class="cf-required">*</span>');

$('#q3 input').attr('required', 'True');

0 0

Answer

SELECTED ANSWER

replied on October 3, 2022

Try these for radio buttons and checkboxes

$('#q3 input:radio').attr('required', 'True');

$('#q3 input:checkbox').attr('required', 'True');

0 0

Replies

replied on October 3, 2022

You just need to be more specific in targetting the field label of the radio button

Try

$('#q3 .cf-label').append('<span class="cf-required">*</span>');

0 0

replied on October 3, 2022

Steve that works but now validation fails because it wants all the boxes checked or both radio buttons selected and you cannot submit the form. Do you know the fix for that portion?

1 0

replied on December 23, 2024 • Show version history

same issue. Ever figure this out?

Update:
I actually got this going. There is actually a 3rd input field on my radio button field:

I have the class 'req' on the non radio fields i want to remove/add required to. I added an additional class 'reqRadio' for radio buttons to jump through a few more hoops. It was also adding the required asterisk in the wrong place as well. Hope this helps:

1 0

replied on December 23, 2024

I was doing some testing on my end as well, glad you got it figured out. Steve's code did work for my form, but it appears yours is a little more complex.

1 0

You are not allowed to follow up in this post.

Question

Question

Jquery radio button required asterisk

Answer

Replies

Sign in to reply to this post.