Skip Navigation

[Resolved] Error message beeing displayed inside LI for radio buttons

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Tagged: 

This topic contains 15 replies, has 2 voices.

Last updated by pedro.S 1 month ago.

Assigned support staff: Shane.

Author
Posts
#1666665

Hi,

hidden link

I have a radio button with 2 options as you can see in the screenshot. This field is required.
The UL has Columns:2 css attribute.

Question is... why is the error beeing displayed inside the first LI and not outside the UL (which it should be) as you can see in the HTML.
This messes up things when users want radio buttons in several columns, if it was a vertical list it would be displayed correctly... still in the HTML it doesnt make sense to insert the error into the first LI.

EDIT: And i just noticed that in the Checkbox field the same thing happens... the error is displayed inside the LI and not outside the UL as it would correctly be.

Thank you

#1667457

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Pedro,

I can see the issue especially if you want to float all the options in one line.

What I can do is to escalate this to our 2nd tier for them to bring it to our development team for a change. However we will need to use a css workaround to resolve this in the meantime.

If you provide me with a link to the page with the form I should be able to provide a workaround for you.

Please let me know.
Thanks,
Shane

#1668365

Thanks Shane,

Could you please assign next answer as private so i can share the info?

thanks

#1668465

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Pedro,

Here are the private fields.

Thanks,
Shane

#1668539

Shane,
Credentials Removed

thank you.

#1670139

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Pedro,

Based on how this field is structured, it wouldn't be possible to effectively move error message using css.

Try adding the following code to the JS editor of your form and let me know if it helps.


jQuery('.form-submit').click(function(e) {
          if( jQuery('small[for="wpcf-are-member-of-one-of-the-companies-or-universities-partners"]').length){  
   jQuery('small[for="wpcf-are-member-of-one-of-the-companies-or-universities-partners"]').detach().prependTo( jQuery('.wpt-form-set-radios-wpcf-are-member-of-one-of-the-companies-or-universities-partners') ); 
}
});

This should move the error message when you click the submit button. Also please let me know if the form submits as well.

Thanks,
Shane

#1672115

Shane,

The first time i press the submit button, it has the same problem.
The second time i press the submit button, it moves the message yes which is perfectly normal.

The first time i press submit the error is still not there, so javascript can't act on something that does not exist.

Thanks

#1672315

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Pedro,

I've modified it a bit to introduce a delay on the if statement check. So it doesn't fire immediately as the click action is detected.


jQuery('.form-submit').click(function(e) {
setTimeout(if( jQuery('small[for="wpcf-are-member-of-one-of-the-companies-or-universities-partners"]').length){  
   jQuery('small[for="wpcf-are-member-of-one-of-the-companies-or-universities-partners"]').detach().prependTo( jQuery('.wpt-form-set-radios-wpcf-are-member-of-one-of-the-companies-or-universities-partners') ); 
}, 1000);
});

Please try this now and let me know if it helps.

If not could you provide me with admin access to the website so that I can debug the code as well ?
The private fields are enabled.

Thanks,
Shane

#1680165

Just a side note:

Since javascript only acts when the DOM is loaded, i really don't know if this will be "approved". I mean the fact that the user sees the error moving from one place to another in the space of a second.

This is an issue of correct HTML Markup which is not correctly implemented.

#1681093

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Pedro,

"This is an issue of correct HTML Markup which is not correctly implemented."

I recognise this but for a more permanent fix I will need to escalate it to our development team. The major issue is that I cannot say when they will fix this as it will be considered as low priority.

Should I still escalate given this disclaimer?

Thanks,
Shane

#1682193

Hi Shane,

Yes Please escalate this problem that happens with radio buttons and checkboxes.
Did you managed to find a JS workaround?

thanks

#1682875

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Pedro,

I tried to log in to improve the JS implementation but it seems that your server credentials don't work anymore.

I'm not able to log onto the site . See Screenshot

Not sure if the admin credentials for the wordpress install still works.

Can you check on this for me.

Thanks,
Shane

#1684205

Shane,

Please make the next question private please

Thanks

#1684293

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Pedro,

The private fields have been enabled.

Thanks,
Shane

#1685643

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Pedro,

I've made some modifications to the javascript so that it moves the error on the first click.

Please check on your end and let me know if everything is ok now.

Thanks,
Shane