Improve client-side UI validation

[donnapep]

Description of the problem

We should consider improving the client-side validation UI to prevent issues like https://github.com/Automattic/WP-Job-Manager/issues/1158. See also https://github.com/Automattic/WP-Job-Manager/issues/842.

Perhaps we could borrow from what WooCommerce does:

[jom]

@donnapep The screenshot you provided is from a third-party theme (I think Jobify?) and not provided by core. Were there other improvements specific to the job submission you had in mind?

[donnapep]

The validation when posting a new job is inconsistent. For example, if I don't enter a Title, I get immediate feedback because it's set to a required field:

But if I don't enter a Description or Category, the page does server-side validation instead:

It would be nice if the validation were consistent. And, for server-side validation method, the error message included all required fields so that the user doesn't have to keep re-submitting only to be told they need to fill out another missing field.

[spencerfinnell]

@jom @donnapep with #1257 accepted can this issue be milestoned too? We see a fair amount of confusion/frustration by our users regarding this.

I'm personally of the opinion that client-side should be removed since non-standard fields like TinyMCE will likely tend to cause complications. All server side validation at once would make the whole experience much more consistent. There is obviously the benefit of instant feedback with client side but unless it can be perfected for all fields I don't think the trade off is worth it.

[roundhill]

~The description field uses tinymce, so it is in an iframe that we can't validate using HTML 5 😭~

I found a solution using setCustomValidity() thanks to a tip from @jom. See #1732

[danjjohnson]

Reopening this because two of the referenced issues are ongoing.

The first is that on themes with a fixed header, the field that is not valid is hidden behind the header, causing confusion, as mentioned here: https://github.com/Automattic/WP-Job-Manager/issues/1158#issuecomment-325497944

The second is that the validation is still inconsistent, with client side validation for most fields, but server side only for file uploads: https://github.com/Automattic/WP-Job-Manager/issues/1163#issuecomment-376846040

[cena]

https://wordpress.org/support/topic/workaround-for-field-validation-error-notice/