plugins - Phone number auto format in elementor form

admin管理员组

文章数量:1123503

I have a form made with elementor form and trying to format phone number like this: (999) 999-9999 I have followed tutorials found online and tried to use this code:

<script>
document.addEventListener('DOMContentLoaded', function() {
  const phoneNumberInput = document.getElementById('form-field-phone');

  phoneNumberInput.addEventListener('input', formatPhoneNumber);

  function formatPhoneNumber() {
    let inputValue = phoneNumberInput.value;
    inputValue = inputValue.replace(/\D/g, ''); // Remove non-digit characters

    if (inputValue.length > 10) {
      inputValue = inputValue.slice(0, 10);
    }

    let formattedValue = '';

    if (inputValue.length > 6) {
      const areaCode = inputValue.slice(0, 3);
      const prefix = inputValue.slice(3, 6);
      const lineNumber = inputValue.slice(6, 10);

      formattedValue = `${areaCode}-${prefix}-${lineNumber}`;
    } else if (inputValue.length > 3) {
      const areaCode = inputValue.slice(0, 3);
      const prefix = inputValue.slice(3, 6);

      formattedValue = `${areaCode}-${prefix}`;
    } else {
      formattedValue = inputValue;
    }

    phoneNumberInput.value = formattedValue;
  }
});

</script>

I have tried using custom code of elementor and also by adding html field in elementor form. I have applied custom id as 'phone' and the field type is 'tel'. But it's not working and giving error

"Pattern attribute value [0-9()#&+*-=.]+ is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /[0-9()#&+*-=.]+/v: Invalid character in character class"

Is there any way to fix this?

I have a form made with elementor form and trying to format phone number like this: (999) 999-9999 I have followed tutorials found online and tried to use this code:

<script>
document.addEventListener('DOMContentLoaded', function() {
  const phoneNumberInput = document.getElementById('form-field-phone');

  phoneNumberInput.addEventListener('input', formatPhoneNumber);

  function formatPhoneNumber() {
    let inputValue = phoneNumberInput.value;
    inputValue = inputValue.replace(/\D/g, ''); // Remove non-digit characters

    if (inputValue.length > 10) {
      inputValue = inputValue.slice(0, 10);
    }

    let formattedValue = '';

    if (inputValue.length > 6) {
      const areaCode = inputValue.slice(0, 3);
      const prefix = inputValue.slice(3, 6);
      const lineNumber = inputValue.slice(6, 10);

      formattedValue = `${areaCode}-${prefix}-${lineNumber}`;
    } else if (inputValue.length > 3) {
      const areaCode = inputValue.slice(0, 3);
      const prefix = inputValue.slice(3, 6);

      formattedValue = `${areaCode}-${prefix}`;
    } else {
      formattedValue = inputValue;
    }

    phoneNumberInput.value = formattedValue;
  }
});

</script>

I have tried using custom code of elementor and also by adding html field in elementor form. I have applied custom id as 'phone' and the field type is 'tel'. But it's not working and giving error

"Pattern attribute value [0-9()#&+*-=.]+ is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /[0-9()#&+*-=.]+/v: Invalid character in character class"

Is there any way to fix this?

• plugins
• forms
• validation

Share Improve this question asked 2 days ago Milan BastolaMilan Bastola 29722 gold badges44 silver badges1515 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

i did more research and found a code in youtube video. I modified a bit to work on zip code as well and it's working as expected. Also I needed to change the field type from 'tel' for phone and 'number' for zip to 'text'

<script type="text/javascript">
  jQuery(function ($) {
    $('#form-field-phone').on('input', function () {
      var input = $(this).val();

      // Remove all non-numeric characters
      input = input.replace(/\D/g, '');

      // Limit to 10 digits
      input = input.slice(0, 10);

      // Format based on the length of the input
      if (input.length > 6) {
        input = '(' + input.slice(0, 3) + ') ' + input.slice(3, 6) + '-' + input.slice(6, 10);
      } else if (input.length > 3) {
        input = '(' + input.slice(0, 3) + ') ' + input.slice(3, 6);
      } else if (input.length > 0) {
        input = '(' + input.slice(0, 3);
      }

      // Update the input field with the formatted value
      $(this).val(input);
    });
  });
</script>
<script type="text/javascript">
  jQuery(function ($) {
    $('#form-field-zipcodefive').on('input', function () {
      var input = $(this).val();

      // Remove all non-numeric characters
      input = input.replace(/\D/g, '');

      // Limit to exactly 5 digits
      input = input.slice(0, 5);

      // Update the input field with the formatted value
      $(this).val(input);
    });
  });
</script>

本文标签： pluginsPhone number auto format in elementor form