[Resolved] jQuery.mask() on a CRED field

[Author]

Posts

[selmoK]

I need to format some custom type fields like phone and social numbers on a CRED form. I am trying to use mask input with jquery. I tried to use the example: hidden link on https://toolset.com/forums/topic/format-data-input-like-social-security-number-of-phone-number-hyphens/ but i couldn´t make it work. I have inserted the code on the JS CRED form section :

---------------
$("#tel").mask("(99) 9999?9-9999");

$("#tel").on("blur", function() {
var last = $(this).val().substr( $(this).val().indexOf("-") + 1 );

if( last.length == 3 ) {
var move = $(this).val().substr( $(this).val().indexOf("-") - 1, 1 );
var lastfour = move + last;

var first = $(this).val().substr( 0, 9 );

$(this).val( first + '-' + lastfour );
}
});
-----------------

My CRED form has the 'tel' field:

<div class="form-group">
<label>Phone</label>
[cred_field id='tel' field='tel' post='ad' value='' urlparam='' class='form-control' output='bootstrap']
</div>

Could you help me, please?

[Christian Cox]

There are a few more steps that may not be obvious for someone who is unfamiliar with JavaScript.
- Masking is not native to jQuery, and it requires a separate plugin file. You must enqueue the jQuery plugin file "jquery.maskedinput.js" in your child theme, or use another plugin to enqueue it. Here's the plugin on github: hidden link, and here's documentation on how to enqueue a file in your custom theme: https://developer.wordpress.org/reference/functions/wp_enqueue_script/
- You must wrap your JavaScript code in an event listener callback so it is executed after jQuery and CRED have both been initialized. Here is a template you can use:

jQuery(window).bind('load', function(){
  // put your code inside here
});

- You must use the 'jQuery' namespace instead of '$' in any JavaScript code. Replace '$' with 'jQuery' everywhere in your JavaScript.
- The attribute "id" is not a valid attribute on a cred_field shortcode, so the ID "tel" selector is not going to work. You can use a class instead, something like 'js-cred-tel', and then modify your jQuery code to use that selector:

$("#tel")

Should become something like:

jQuery(".js-cred-tel")

The valid cred_field attributes are shown in the documentation here: https://toolset.com/documentation/user-guides/cred-shortcodes/#cred_field

[selmoK]

Thanks, it worked fine now.