SOLVED

Radio Buttons as a required field with custom validation

Go to solution
micmiller
Level 1

Radio Buttons as a required field with custom validation

I'm using the script for a multipart form from this post:

https://nation.marketo.com/t5/product-discussions/can-we-build-two-step-form-in-marketo-by-using-cus...

 

I am using it to create a multi-part form that functions as a quiz with a contact panel at the end to be sent results. For the quiz part I have a single radio button group in each fieldset and make that radio button required through the javascript settings variable so users have to provide an answer before moving to the next question.

 

When I do that, I am getting a browser console error:

 TypeError: Cannot read properties of null (reading 'parentNode')

when the code tries to apply the required field setting to the radio buttons. That has led to either the required behavior not being applied, or the formatting of the first choice changing when the required message is displayed.

 

In the browser tools, I see the error message element being inserted within the structure of the first radio button input element.

micmiller_0-1698447283315.png

 

If I drag the error element in the inspector to a place outside of that input element (like the line above it), the radio buttons look and function as they should.

 

Rather than fumbling through the code, I am looking for some help to add a radio button group condition to the CodePen from @SanfordWhiteman to handle the validation cleanly. 
MktoForms2 :: FSaaT v1.0.0​ (FSaaT = Fieldset-at-a-Time). 

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Radio Buttons as a required field with custom validation

It’s because you have custom CSS that’s missing the appropriate selector(s) for when the error is shown:

 

For example, you have:

.mktoFormRow input[type=radio] + label:before,
.mktoFormRow input[type="checkbox"] + label:before {
  /* styles */
}

 

Where you should have:

.mktoFormRow input[type=radio] + label:before,
.mktoFormRow input[type="checkbox"] + label:before,
.mktoFormRow input[type=radio] + .mktoError + label:before,
.mktoFormRow input[type="checkbox"] + .mktoError + label:before {
   /* styles */
}

 

View solution in original post

4 REPLIES 4
Jo_Pitts1
Level 10 - Community Advisor

Re: Radio Buttons as a required field with custom validation

@micmiller ,

Can you provide a link to your page?  

Regards

Jo

 

micmiller
Level 1

Re: Radio Buttons as a required field with custom validation

The link to the page is: https://www.apptio.com/_finops-quiz-staging/

 

To reproduce the issue, click the "That's my final answer" button without choosing an option and note that the first radio button loses its button indicator.

SanfordWhiteman
Level 10 - Community Moderator

Re: Radio Buttons as a required field with custom validation

It’s because you have custom CSS that’s missing the appropriate selector(s) for when the error is shown:

 

For example, you have:

.mktoFormRow input[type=radio] + label:before,
.mktoFormRow input[type="checkbox"] + label:before {
  /* styles */
}

 

Where you should have:

.mktoFormRow input[type=radio] + label:before,
.mktoFormRow input[type="checkbox"] + label:before,
.mktoFormRow input[type=radio] + .mktoError + label:before,
.mktoFormRow input[type="checkbox"] + .mktoError + label:before {
   /* styles */
}

 

micmiller
Level 1

Re: Radio Buttons as a required field with custom validation

That fixed it, thank you for your help!!