Multiple fields validation

In other pages with forminator forms identical to this one, but with a different ID code, I have to apply the same validation rule. Therefore it is important that there are no problems if different users are doing the validation on different Forminator forms, avoiding conflicts using the same global variable.

Hello @andycucca

Hope you’re doing well today! I am doing well, thanks for asking!

Thank you for sharing form export, I was able to import the form on my test site and check more about it.

In order to understand better what you are trying to achieve, can you please confirm the following?

If ID FIDE or National ID field is entered, are you looking to pre-populate the fields that are on the same line? Or if you are looking to make them “required”.

For example: If any visitor fills ID FIDE field –
Will the Fide category (select-2), ELO Fide (number-1), K Fide (select-13) fields will auto-filled with a specific value or if those fields will be marked as “required”?

Can you please confirm this so that we can check further and suggest.

Also about –

The validation must be activated when the “payment” button is pressed

Can you please share an example scenario or use case so that we can understand the process better?

Awaiting your response.

Kind Regards,
Saurabh

Hello,

sorry if I was misunderstood, I definitely wasn’t clear enough.

If ID Fide (number-4) is entered, the other fields on the same line must be “required”, so the user must fill them, also if f National ID (number-6) is entered, the other fields on the same line must be “required”, so the user must fill them

The use case is quite simple:
– the user fill some data in the form
– the user press the “pagamento” button
– if the validation rule is OK, he can go to the next step, if not he receive an error message, for example “Have to fill at least one FIDE ID or Nat ID”, another example “FIDE ELO is required”, and so on.

Thanks again for your help

Andrea

Hi @andycucca,

Thank you for further clarification.

The Visibility Rules can help you with this. Please enable the option “Required” under the Settings tab of all the required fields. And now under the Visibility tab of the field, configure visibility to enable the field only if the parent field has any value. For example, the visibility condition should be set for other fields in the row to be visible only if Fide ID (number-4) has any values.

Please find more about Visibility Conditions in our documentation here: https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#Forminator-Conditional-Logic

I would like one more clarification on whether it is supposed to fill either one of the “Fide ID (number-4)” or “National ID (number-6)”. If it’s possible to have value for both fields, the visibility conditions might not work here completely as expected and might require a workaround.

We look forward to hearing back from you.

Kind Regards,
Nebu John

Hello,

Hope you doing well.

Yes, it’s possible to have value for both fields, ID Fide (number-4) and National ID (number-6).

About the visibility conditions, I clearly understand your suggestion, also I know how to use visibility very well, but in this situation it is not applicable. I cannot make the fields disappear if ID fide is not filled in and so on, the user would be confused by this behavior, this is not OK.
I think it is mandatory a custom PHP or JS functon, to make this custom validation in the form, I do not see other reasonable possibility.

Thanks for your support

Andrea

Hi @andycucca,

The behaviour is more with marking other fields as required based on a value entered in number-4 and number-6, which I’m afraid is quite a custom workflow which by default isn’t supported in the form.

The easiest workaround would be to consider the visibility setting, however, since it doesn’t fit your requirement, I’m checking with our developer to see if there is any workflow that could be suggested which would fit your requirement.

Will keep you posted once we get further feedback asap.

Kind Regards,

Nithin

Well, I will wait for your feedback.

Thanks for your he,lp,

Andrea

Hi @andycucca,

Can you please try adding the following workaround using a mu-plugin?

<?php

add_action( 'wp_footer', 'wpmudev_required_validation_fields', 9999 );
function wpmudev_required_validation_fields() {
	global $post;
    if ( is_a( $post, 'WP_Post' ) && !has_shortcode( $post->post_content, 'forminator_form' ) ) {
        return;
    }
	?>
	<script type="text/javascript">
	jQuery( document ).ready( function($){
		setTimeout(function() {
			$('.forminator-custom-form').trigger('after.load.forminator');
		},100);

		$(document).on('after.load.forminator', function(event, form_id) {
            if ( event.target.id == 'forminator-module-10410' ) { // Please change the form ID.
                $('#number-4 input').on('change', function(){
                    if ( $(this).val() !== '' ) {
                        $('#number-1 input').attr('required', true);
                        $('#select-2 select').attr('required', true);
                        $('#select-13 select').attr('required', true);
                    } else {
                        $('#number-1 input').removeAttr('required');
                        $('#select-2 select').removeAttr('required');
                        $('#select-13 select').removeAttr('required');
                    }
                });

                $('#number-6 input').on('change', function(){
                    if ( $(this).val() !== '' ) {
                        $('#number-2 input').attr('required', true);
                        $('#select-12 select').attr('required', true);
                        $('#select-14 select').attr('required', true);
                    } else {
                        $('#number-2 input').removeAttr('required');
                        $('#select-12 select').removeAttr('required');
                        $('#select-14 select').removeAttr('required');
                    }
                });
            }
		});
	});
	</script>
	<?php
}

I’ve used the field IDs according to your form’s specifications. Please remember to replace the form ID in the code (10410) with your actual form ID. Please find more about how to add a mu-plugin in our documentation here: https://wpmudev.com/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins

I hope that helps.

Kind Regards,
Nebu John

Hello,

Many thanks for your invaluable help. I checked your function and I think it’s fine for the required fields, but it doesn’t seem to be a check that ensures that at least one of the two fields has been filled out. I err?
As discussed above, the user is required to fill in one of the fields “Fide ID (number-4)” or “National ID (number-6)” or perhaps both fields. So if the two fields are empty, an error message should be triggered.

Kind regards

Andrea

Hello Andrea,

Thank you for the clarification.

We are checking this with the developers, and will be letting you know, once there’s an update.

Please keep in mind that the next reply may take longer, depending on the current amount of complex tasks.

Best Regards,
Dmytro

Ok, I will wait for some update.

thanks

Hi @andycucca,

Could you please check and see whether adding the following snippet along with your existing code shared before helps?

add_action( 'wp_footer', 'wpmudev_number_validation_rules', 9999 );
function wpmudev_number_validation_rules() {
	global $post;
    if ( is_a( $post, 'WP_Post' ) && !has_shortcode( $post->post_content, 'forminator_form' ) ) {
        return;
    }
	?>
	<script type="text/javascript">
	jQuery( document ).ready( function($){
		setTimeout(function() {
			$('.forminator-custom-form').trigger('after.load.forminator');
		},100);

		$(document).on('after.load.forminator', function(event, form_id) {
            if ( 'forminator-module-1609' == event.target.id ) { // Please change the form ID.
                $.validator.addMethod("required_one", function (value, element) {
                    if ( $( "#number-4 input" ).val() == '' && $( "#number-6 input" ).val() == '' ) {
                        return false;
                    }
                    return true;
                },"Please fill atleast one of these two fields.");
                $( "#number-4 input" ).attr( "required_one", "required_one" );
                $( "#number-6 input" ).attr( "required_one", "required_one" );
            }
		});
	});
	</script>
	<?php
}

Please do make sure to update the form ID of 1609 in the above code with your form ID.

You can implement the above code using mu-plugins. Please check this link on how to implement the above code as a mu-plugins:
https://wpmudev.com/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins

Best Regards,

Nithin

Hi @andycucca

We haven’t heard from you in a while, I’ll go and mark this thread as resolved. If you have any additional questions or require further help, please let us know!

Kind Regards,
Kris