New to the community? Start here

[Forminator Pro] Help with custom validation

We’re looking forward to implementing some validation in a Forminator field following the instructions on this post – https://wpmudev.com/forums/topic/forminator-pro-validation-letters-and-numbers-only/ , but unfortunately, we can’t make it work. We need a different validation though, we need to allow only a-z A-Z.

The mu-plugin is currently added to the site. Could you please take a look and see why it isn’t working?

Sat, 28 Mar 2020 9:21:02
More Forminator Pro discussions
Forminator Pro
  • Dmytro Borovyk
    • Staff

    Hello GMCS,

    Thank you for contacting us!

    I’ve replaced the following line:

    $( document ).ready( function() {

    with

    $(document).bind('ready ajaxComplete', function() {

    and this part:

    $( cvalinput ).focusout( function() {

    with

    $(cvalinput).bind('focusout keyup ',function() {

    Please test the form now, the message should be displaying.

    Best Regards,
    Dmytro

  • GMCS
    • Design Lord, Child of Thor

    Thank you for looking into this request, I did some testing and it works fairly well. Is there a way to prevent the visitors from continuing to the the next page (of the form) if the validation fails? As it is, it allows the visitor to proceed.

    Thank you!

  • Dmytro Borovyk
    • Staff

    You’re welcome, GMCS!

    I’ve made some adjustments for the Next button in custom-validation.php, please try it now.

    The current code is:

    <?php

add_action(

    'wp_footer',

    function() {

        ?>

        <script>

			(function($) {
				$(document).bind('ready ajaxComplete', function() {

					var cvalinput = $('.custom-validate input'),

						regx = /^[A-Za-z]+$/,

						valMessage = 'Only alphabetic characters are allowed.',

						valHTML = '<label class="forminator-label--validation">' + valMessage + '</label>';

					$(cvalinput).bind('focusout keyup ', function() {

						if (regx.test($(this).val()) || $(this).val() === '') {

							$(this).parent().parent().find('label.forminator-label--validation').remove();

						} else {

							if (!$(this).parent().parent().find('label.forminator-label--validation').length) {

								$(this).parent().parent().append(valHTML);

							}

						}

					});

					$("button.forminator-button-next").mouseover(function() {

						if (!regx.test($(cvalinput).val()) && $(cvalinput).val() != '') {
							$(cvalinput).attr('placeholder', $(cvalinput).val());
							$(cvalinput).attr('value', '');
							if (!$(cvalinput).parent().parent().find('label.forminator-label--validation').length) {

								$(cvalinput).parent().parent().append(valHTML);

							}
						}

					});

				});

			}(jQuery))

            </script>

            <?php

    },

    999

);

    Best Regards,
    Dmytro

  • Dmytro Borovyk
    • Staff

    Hello GMCS,

    I’ve adjusted the code on the site, could you please test it now.

    <?php

add_action(

    'wp_footer',

    function() {

        ?>

        <script>

			(function($) {
				$(document).bind('ready ajaxComplete', function() {

					var cvalinput = $('.custom-validate input'),

						regx = /^[A-Za-z]+$/,

						valMessage = 'Only alphabetic characters are allowed.',

						valHTML = '<label class="forminator-label--validation">' + valMessage + '</label>';

					$(cvalinput).bind('focusout keyup', function() {

						if (regx.test($(this).val()) || $(this).val() === '') {

							$(this).parent().parent().find('label.forminator-label--validation').remove();

						} else {

							if (!$(this).parent().parent().find('label.forminator-label--validation').length) {

								$(this).parent().parent().append(valHTML);

								$("button.forminator-button-next").on('focusin', function() {

									if (!regx.test($(cvalinput).val()) && $(cvalinput).val() != '') {
										$(cvalinput).attr('placeholder', $(cvalinput).val());
										$(cvalinput).attr('value', '');
										if (!$(cvalinput).parent().parent().find('label.forminator-label--validation').length) {

											$(cvalinput).parent().parent().append(valHTML);

										}
									}

								});

							}

						}

					});

				});

			}(jQuery))

            </script>

            <?php

    },

    999

);

    Best Regards,
    Dmytro