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

[Author]

Posts

[pedro.S]

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

[Shane]

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

[pedro.S]

Thanks Shane,

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

thanks

[Shane]

Hi Pedro,

Here are the private fields.

Thanks,
Shane

[pedro.S]

Shane,
Credentials Removed

thank you.

[Shane]

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

[pedro.S]

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

[Shane]

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

[pedro.S]

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.

[Shane]

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

[pedro.S]

Hi Shane,

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

thanks

[Shane]

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

[pedro.S]

Shane,

Please make the next question private please

Thanks

[Shane]

Hi Pedro,

The private fields have been enabled.

Thanks,
Shane

[Shane]

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