[Forminator Pro] VALIDATION LETTERS AND NUMBERS ONLY

Hey
How are you?
I have a form and I'd like to test some fields there to make sure the user enters letters and numbers only, without special characters
How can this be done?

  • Konstantinos Xenos
    • Rubber Duck Debugger

    Hi Yair Shiloach ,

    You can add this mu-plugin with some modifications to achieve this kind of validation.

    First you have to add a custom class into your field like so ( in my example I simply used custom-validate):

    And then you can add this code into a mu-plugin like this:

    Always make sure to keep a backup of your site before changing/adding custom code.

    1] Navigate to your /wp-content/ directory and create a new one named mu-plugins if it doesn't exist.
    2] Inside the mu-plugins folder create a file named custom-validation.php
    3] Edit the file and copy / paste this code snippet inside.

    <?php
    
    add_action(
    	'wp_footer',
    	function() {
    		?>
    		<script>
    		( function ( $ ) {
    			$( document ).ready( function() {
    				var cvalinput = $( '.custom-validate input' ),
    					regx = /^[A-Za-z0-9]+$/;
    
    				$( cvalinput ).focusout( 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( '<label class="forminator-label--validation">Only alphanumeric characters are allowed.</label>' );
    						}
    					}
    				} );
    			} );
    		} ( jQuery ) )
    		</script>
    		<?php
    	},
    	999
    );

    4] Save and close the file.
    5] The final path should look like /wp-content/mu-plugins/custom-validation.php
    6] You will have to change the ".custom-validate" in the code depending on what you added in the field class as well for this to work and you can customize the error message as well.

    In the front-end now you should be able to see something like this when incorrect characters are used:

    Tell me if you need further help customizing this!

    Regards,
    Konstantinos

  • Konstantinos Xenos
    • Rubber Duck Debugger

    Hey Yair Shiloach ,

    No problem at all I'm glad I could help!

    Can you please replace in the code the line that says:
    regx = /^[A-Za-z0-9]+$/;
    into:
    regx = /^[A-Za-z0-9\u0590-\u05FF]+$/;

    I've added the Unicode range that corresponds to Hebrew characters as well. Unfortunately as I don't speak/write Hebrew I could only test this by randomly copy-pasting text from various online sources and it seems to be working as expected, could you give it a go as well for a confirmation :slight_smile: ?

    Regards,
    Konstantinos

    • Konstantinos Xenos
      • Rubber Duck Debugger

      I see there are spaces on that translation that you've sent, spaces are also counted as special characters so I've excluded those by default as well.

      So please inform me of the following so I can help out further :slight_smile: :
      1] Try without spaces and tell me if that works as expected ( this will show us if the character range is correct at least ).
      2] Tell me if you want spaces to be allowed as well so I can alter the code again.

      Regards,
      Konstantinos

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.