Field required message

Default behavior for Google Forms (from Google) is for the error text to be present but hidden. When a form is submitted and there is an error, Google will change the CSS sent back with the second rendering of the form to show the error text.

Now if you use the Validation functionality the plugin provides (which was added before Google added their error checking) then jQuery will be used to make the CSS visible or not based on the error checking results.

Sometimes it is really difficult to define CSS which appears in the proper place in the hierarchy.

Thanks, Mike. Sorry to be difficult.
I tried with both Validation on and off – the result is the same.
The error message appears in black to the right of text fields.
I have too many drop-down fields which means it would be time-consuming for me to validate each of these fields in the plugin settings.

Is there no way I can display the error message in red under each of the
fields?

The link I sent you before is still there. Would it be possible for you
to have a look?

Right now it looks like you have validation turned on. Do you want to use jQuery validation? If so, try doing this:

label.error-message {
    color: red;
    float: right;
}

It won’t put the error text under the field but it does put them nicely lined up on the right margin. I’ll keep fiddling with it but this is the best I have so far.

The strange thing is that validation was off when you looked at it. I turned it on again. Your suggestion works beautifully – it does line up nicely on the right margin. It seems to work regardless of validation.
The only two things: the error does not show up with drop-downs and it doesn’t look nice on check-box fields. Is there something I could do?
Many thanks!

Hello Mike,

sorry to ask: is jQuery validation necessary? I have it turned to off.
Thanks.

No, it is not necessary and in some cases, may not be desired at all.

The jQuery validation functionality was added to the plugin long before Google added validation functionality to Forms. There is some functional overlap between what Google offers and what the Google Forms plugin offers.

The primary difference is how the validation is done. To use Google’s functionality you set up validation when you build the form and responses are checked when the form is submitted. A form submission and subsequent page load takes place and either the form comes back marked up with errors or it is processed.

Using the Google Forms plugin validation (which is based on the jQuery Vaqlidate plugin – not a WordPress plugin, it is a jQuery plugin) the validation check is done via client side Javascript and happens when fields change or when the submit button is pressed. The form will never actually be submitted if validation fails. This method is a little more elegant in that the user doesn’t have to wait for a form submit and page load to find out there is an error on the form.

The downside is because it relies on Javascript, if there are any Javascript errors on the page (and a lot of plugins and themes are careless and generate Javascript errors – you can see them using an inspection tool like Firebug), the validation Javascript will never run. These same sort of Javascript errors will cause other problems for the Google Forms plugin so it isn’t just validation that doesn’t work.

When Google added Validation to their version of Forms, they tagged them with the very generic CSS class “error-message” instead of using something unique (just about every other CSS class defined by Google begins with “ss-q-“). I’ve looked at numerous problems with error message that are the result of the theme also defining “error-message” and it being visible thus the user sees it all the time. The CSS prefix can help alleviate this problem as can CSS selectors but it is almost always a site specific solution – unfortunately one size does not fit all.

Thank you so much, Mike, for this wonderful explanation and as always for your outstanding support!