[Resolved] Javascript not working on phone numbers

[Author]

Posts

[FelipeP5703]

I am trying to: I'm trying to add a java-script in order to add the parentheses and dashes on phone numbers on the forms.

Here is the code:

jQuery(function($) {
$('.celular').on('keypress', function(e) {
  var key = e.charCode || e.keyCode || 0;
  var phone = $(this);
  if (phone.val().length === 0) {
    phone.val(phone.val() + '(');
  }
  // Auto-format- do not expose the mask as the user begins to type
  if (key !== 8 && key !== 9) {
    if (phone.val().length === 3) {
      phone.val(phone.val() + ')');
    }
    if (phone.val().length === 4) {
      phone.val(phone.val() + ' ');
    }
    if (phone.val().length === 6) {
      phone.val(phone.val() + '-');
    }
    if (phone.val().length === 11) {
      phone.val(phone.val() + '-');
    }
    if (phone.val().length >= 16) {
      phone.val(phone.val().slice(0, 13));
    }
  }

  // Allow numeric (and tab, backspace, delete) keys only
  return (key == 8 ||
    key == 9 ||
    key == 46 ||
    (key >= 48 && key <= 57) ||
    (key >= 96 && key <= 105));
})

.on('focus', function() {
  phone = $(this);

  if (phone.val().length === 0) {
    phone.val('(');
  } else {
    var val = phone.val();
    phone.val('').val(val); // Ensure cursor remains at the end
  }
})

.on('blur', function() {
  $phone = $(this);

  if ($phone.val() === '(') {
    $phone.val('');
  }
});
});

It's working on this site: hidden link

I also added the word "celular" to the class field here:

<div class="form-group col-sm-3 celular">
			<label>Celular</label>
			[cred_field field='celular' force_type='field' class='form-control' output='bootstrap']
		</div>

Not sure why it's not working.

[FelipeP5703]

I should have added the "celular" inside the cred shortcode. My bad. My issue is resolved now. Thank you!