Help me use my own messages for form field validation instead of browsers’

General HivePress
1

As I checked, when submitting a new Listing or updating one, Firefox doesn’t show the messages of fields validation on Android phones!

So I want to completely disable browser validation of form fields and use my own messages instead (especially in other languages than English).

I searched a lot on the Internet and found somethings, but as I’m not professional enough in web programming, I confused somehow! I found that we can do this by adding ‘novalidate’ property to Html froms and using some Javascript functions like setCustomValidity!

But I don’t know if I should modify Hivepress codes directly or if there are some better and more standard ways!

Unfortunately, I couldn’t understand either what I can with hivepress actions and filters as well as functions like add_filter!

So please explain to me in easy words that how I can customize the way of showing filed validation messages to users?

4

Hi,

Unfortunately, there is no simple solution for this, in that case you would need to implement a fully custom solution using JavaScript.

Could you please clarify which browser and version you are using, as well as the Android version? Form input validation is a standard browser feature, so this information will help us better understand the issue.

For example, if a field has the required attribute, the browser should automatically highlight it and show a validation message when the user tries to submit the form without filling it in. This is part of standard HTML form behavior across modern browsers.

5

Thanks for your answer, Kseniia

Regarding the problem I faced in Firefox, I tested it under Android ver. 11 with the latest versions of Firefox (ver. 152), Chrome (ver. 149) and Opera (ver. 99) and the result was:

Chrome and Opera: work fine (show error messages like: Please fill out this field!)

Firefox: shows nothing and pressing the submit button has no effect!

And regarding my main request, using my own messages instead of the browsers’, I could find a relatively simple solution that is adding a short piece of code to class-form.php file (in includes/form path):

$attributes[‘novalidate’] = ‘novalidate’;

This attribute disables browser’s field validation and so the internal hivepress validation would be used instead (it shows the messages on the top of the page in a grey-colored box). Consequently, I can translate the notification messages into my own ones through Loco Translate plugin!

As hivepress has a field validation solution by itself, I think this solution must be active by default or at least I think there must be a simple way to switch to this solution. I think there must be a setting in the WordPress admin panel or somewhere else for this!

I couldn’t find such setting, so if there is someone professional, especially from the hivepress core team, they can help in this way.

Note: I found one other topic related to this case, although it was not answered correctly either: Translating field validation errors

8

Thanks for the details.

If the attribute is not validating, you can try using the following filter:

add_filter(
	'hivepress/v1/fields/field',
	function( $args ) {
		$args['attributes']['novalidate'] = 'novalidate';
		return $args;
	}
);

Please note that this hook applies to all fields globally, and it may not work for every field type depending on how the form is rendered.

9

Thanks for your help.

Although I think the code below seems better:

add_filter(

        'hivepress/v1/forms/form',

        function( $args ) {

                    $args\['attributes'\]\['novalidate'\] = 'novalidate’;

                    return $args;

        }

);

But anyway, let me know if there is any way to select a specific form, filed or attribute using their names or types inside the codes above, so we can customize a specific field or attribute individually?

Actually I want to set a specific CSS/HTML id for some attributes so I can modify their viewing styles in my CSS codes.

So, how can we