New to the community? Start here

[Forminator Pro] I want to add field validation via regular expressions to a form

Is it possible to use custom validation of user input? I want to sanity check a customer ID for no. of digits and value of first character (must be 0). 

Wed, 7 Apr 2021 8:32:37
More Forminator Pro discussions
Forminator Pro
  • Olivija Guzelyte
    • WP Core Meltdown

    Hi there Florian Dobler

    Hope you’re well!

    Unfortunately, there is no direct way to add regex validation to Forminator fields. So you’d need to do it either via some custom JS or a MU plugin.

    I have a snippet I can share with you that may be able to help you with this.
    You can find it here:
    https://gist.github.com/patrickfreitasdev/4187cf2f9bc8a6e3ef2c01e2436b58f4

    In order for it to work the form has to be set to ‘Load from Ajax’.
    Then the line:

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

    selects the custom-validate class on an input field so you either have to add the custom-validate class to the input fields you want to validate or change the custom-validate selector to whichever class the fields that you want to validate have.

    Then add the custom regex where it says:

    let regx = /^[0-9]*$/;

    Finally, you need to add the script to the /wp-content/mu-plugins/ directory of the site. If the mu-plugins directory doesn’t exist, you can create it.
    You can read more about MU plugins here https://wpmudev.com/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins

    Kind regards,
    Olivija

  • Tony G
    • Mr. LetsFixTheWorld

    This is a great question from Florian Dobler with a great answer by Olivija Guzelyte. Thanks to Olivija for providing the info and to Patrick Freitas for the code.

    I haven’t tried the code but it looks like it operates on keypress and thus might not be suitable for some regex. That is, if the user is typing and the regex is validating on each character, it looks like the validation text will flash Invalid until it’s Valid. I guess that’s OK, because it’s accurate, but some folks might want to modify that so that it only validates when focus is lost from the input control. This is more of a question than a statement. Does anyone have an opinion or firm statement about how it’s working in this regard?

    Not to take anything away from this solution, I will probably use this too, until Regex is supported – but this is exactly the kind of code that I had in mind when I wrote this other thread about using tools for form development. No one should ever have to write code like this, as cool and useful as it is.

    We should be able to use hooks on all fields, for all events, to execute client-side JS, server-side WP PHP functions, or to invoke a web service via Ajax. That way we don’t need to understand the mechanics of how this specific plugin/platform does its validation or other internal mechanics. We should just need to provide the inner function code that accepts input and returns a result. It’s exactly the way people write unit tests, exactly the way MVC/MVVM works, exactly the way functions in the wp_ library work, exactly the way OOP works. But many developers continue to write code for fast delivery, making post-production integration extremely difficult, and inevitably leading to longer development cycles later, as well as tough decisions about what features not to implement because they’re too tough.

    </soapbox>

    Thanks again.

  • Patrick Freitas
    • FLS

    Hi Tony G

    I hope you are doing well.

    It is correct, it validates while user types, we can extend it to for example wait for 3-4 strings before the validation but in some cases still not real friendly.

    We are already working on some improvements for Forminator refactoring the code to make it easier to create customization and troubleshooting, I hope we implement more for frontend scripts too.

    The Forminator does have some hooks that validate but it is after the form submit, for example:
    https://gist.github.com/patrickfreitasdev/f654bc92cc4ba5426454a763d1145115

    Best Regards
    Patrick Freitas

    • Tony G
      • Mr. LetsFixTheWorld

      I love those code snippets bud … More More More! :slight_smile:

      As you know, I strongly support adding more hooks to DEV plugins to support third-party integrations, for at least these reasons:
      – We on the outside get more options for fine-tuning solutions that we want.
      – DEV is relieved of some pressure to create specific functionality that doesn’t apply to a broad audience.
      – DEV gets to use its own hooks to add more functionality in a standard way, rather than hard-coding everything in non-standard ways.

      For the front-end, I would look forward to handling some events, not all of course, with async Ajax using server-side code. You don’t actually need to add hooks into the JS, just document the objects, and events that get thrown in various situations so that we can add our own handlers. The code you provided for Regex is extremely helpful, where you demonstrate usage of $(document).on("after.load.forminator" accessing a field with '.custom-validate input'bind on 'focusout keyup ' and setting 'label.forminator-label--validation'

      Best,
      T

  • chang
    • New Recruit

    Hello
    I come from Taiwan
    I want to verify my identity card in the field

    The ID card rules are
    ^[A-Z][0-9]{9}$

    Figure 001.png
    I have start custom-validation.php

    Figure 002.png
    I have created a file named custom-validation.php

    Figure 003.png
    I have put it in the specified location/wp-content/mu-plugins/custom-validation.php

    Figure 004.png
    Also enter the specified file name custom-validation.php in the field

    But… this field will not validate the Regular Expression

    Please help thanks

  • Sanowar Prince
    • FLS

    Hi chang,

    I just checked your screenshots and found multiple issues there. Let me explain a bit more, so you could correct those.

    1. In your code, at line #10, the code is incorrect. Correct one should be like the following:
    let regx = /^[A-Z][0-9]{9}$/;

    2. In your code, at line #8, the CSS selector is custom-validate2. So, in the form field styling tab, you need to use custom-validate2 too instead of custom-validation.php.

    I have attached some screenshots (red marks) with this reply, so you could understand the issues and update those easily. Please try the changes I mentioned above and let us know how it goes. Also, if you have any further queries regarding this issue, please create a separate new ticket, so we could check your issue further from there.

    Best regards,
    Sanowar