CODEWITHSUNDEEP
wordpressformsfieldmaskinggravity
Adam Bramdaw
Adam Bramdaw

Reputation: 1

Gravity forms custom field mask - escaping a "9"

Am having a positive experience whilst using Gravity forms on Wordpress as a whole. However, I am adding a field mask to an input and encountering a small problem.

Every 16 digit account number starts 001191, and we want the customer to be able to input their account number (and not one of the few other identifying numbers associated with them!) into this form.

So, I have that (001191) as a placeholder and a custom mask like this:

0011919999999999

The trouble is, I would like to have that first 9 as part of the custom mask, but can't find a way of escaping it successfully.

I've tried using backslash before it, using quote marks and double quotes, but no joy so far.

Has anyone had a similar problem and found a neat way of resolving this, please?

Upvotes: 0

Views: 1618

Answers (2)

3rd Planet
3rd Planet

Reputation: 1

Currently using GravityForms 2.6.7, this solution references the 'gform_input_mask_script' function here: https://docs.gravityforms.com/gform_input_mask_script/ as well as reworking Dave from Gravity Wiz example above. This example is applied to more than one form field - ID 214 (example account number) and ID 175 (phone number field) and placed within function.php file:

add_filter( 'gform_input_mask_script_45', 'custom_validation_mask', 10, 4 );
function custom_validation_mask( $script, $form_id, $field_id, $mask ) {
  $script = "jQuery(function($){ 
    delete $.mask.definitions['9']; 
    $.mask.definitions['x'] = '[0-9]'; 
    $('#input_45_214').mask( '9xxxxxxxxxxxZxxxxxxxxx' );
    $('#input_45_175').mask( 'xxxxxxxxxx' ); });";

return $script;
}

Upvotes: 0

Dave from Gravity Wiz
Dave from Gravity Wiz

Reputation: 2869

Gravity Forms' uses this script to power our inputs masks (this will change in a future version; version at the time of writing is GF2.3).

https://github.com/digitalBush/jquery.maskedinput

You can add an HTML field to your form and setup a custom definition like so:

<script>
jQuery(function($){
   $.mask.definitions['~']='[9]';
});
</script>

In this example, you would use '~' in your input mask to represent a literal 9.

Edit

If you want to override the default definition, something like this should work:

<script>
jQuery(function($){
   delete $.mask.definitions['9'];
   $.mask.definitions['n'] = '[0-9]';
});
</script>

Then you could use a literal 9 in your mask. The second line replaces the '9' definition with n so you can use n in your input mask to require a number 0 - 9.

Edit II (Nov 11, 2021)

GF 2.5 introduces some order-of-events changes that are challenging to work around. The easiest way to do this now is to reinitialize your mask after overriding the preset definitions.

delete $.mask.definitions['9'];
$.mask.definitions['n'] = '[0-9]';
$( '#input_{formId}_{fieldId}' ).mask( 'nn-99-aaa' );

There's definitely a way to avoid this but I don't have the time to dig in this morning. 😅

Upvotes: 2

Related Questions