CODEWITHSUNDEEP
jquery
Stephen
Stephen

Reputation: 89

Restrict First Number in Numerical String to 2 to 9

I have implemented this jquery code in my site's sandbox and it functions almost perfectly on an input box in a form. It formats the phone number as it is typed. The issue is the string is restricted to 14 characters, and if a visitor enters a 0 or 1 as the first character the phone number is sent via email and is invalid. How can I restrict a user from entering a 0 or a 1 as the first character?

All my business will be local so there is no need for international telephone formatting. Only North American formatting is required. Before I go live with this I would appreciate any input that will help solve my issue.

Thank you,

$(document).ready(function(){
  /***phone number format***/
  $(".phone-format").keypress(function (e) {
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
      return false;
    }
    var curchr = this.value.length;
    var curval = $(this).val();
    if (curchr == 3 && curval.indexOf("(") <= -1) {
      $(this).val("(" + curval + ")" + "-");
    } else if (curchr == 4 && curval.indexOf("(") > -1) {
      $(this).val(curval + ")-");
    } else if (curchr == 5 && curval.indexOf(")") > -1) {
      $(this).val(curval + "-");
    } else if (curchr == 9) {
      $(this).val(curval + "-");
      $(this).attr('maxlength', '14');
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
  <input id="phone" name="phone" type="text" placeholder="Your Phone (Numbers Only)" class="phone-format" required>
</div>

Upvotes: 2

Views: 49

Answers (3)

joshmoto
joshmoto

Reputation: 5088

Here is another posible jquery idea you could extend to handle input control based on .on events like keydown and input to restrict inputting.

See comments in js script below to understand the input event restriction handling...

// jquery on ready
jQuery(document).ready(function($) {

  // phone input constant
  const $phone = $('[name="phone"');

  // phone input keydown events (using .on method)
  $phone.on('keydown', function(e) {

    // current event function phone input value var
    let val = $(this).val();

    // keydown cursor position
    let cursorPos = e.target.selectionStart;

    // if cursor position is 0
    if (cursorPos === 0) {

      // if first phone input keydown event is 1 or 0 then
      if (e.key === '1' || e.key === '0') {

        // prevent keydown event
        e.preventDefault();
        e.stopPropagation();

      }

    }

  // phone input changed event (copy and paste value restriction)
  }).on('input', function(e) {

    // current event function phone input value var
    let val = $(this).val();

    // if copy and pasted phone value begins with 0 or 1
    if (val.startsWith("0") || val.startsWith("1")) {

      // empty phone input value
      $phone.val('');

      // alert or error 
      alert('You cant paste a phone number beginning with 0 or 1');

    }

  });

});
<div>
  <input name="phone" type="tel" placeholder="1234567890" required>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 1

Stephen
Stephen

Reputation: 89

The previous answer still permits a malformed phone number if the user enters a 1 followed by a 0, or vice versa.

I added this line to the code and it works now:

if (curchr == 1 && curval == 1 || curchr == 1 && curval == 0) {
  $(this).val("");
} else 


$(document).ready(function(){
  /***phone number format***/
  $(".phone-format").keypress(function (e) {
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
      return false;
    }
    var curchr = this.value.length;
    var curval = $(this).val().replace(/^[01]/, '');
    if (curchr == 1 && curval == 1 || curchr == 1 && curval == 0) {
      $(this).val("");
    } else if (curchr == 3 && curval.indexOf("(") <= -1) {
      $(this).val("(" + curval + ")" + "-");
    } else if (curchr == 4 && curval.indexOf("(") > -1) {
      $(this).val(curval + ")-");
    } else if (curchr == 5 && curval.indexOf(")") > -1) {
      $(this).val(curval + "-");
    } else if (curchr == 9) {
      $(this).val(curval + "-");
      $(this).attr('maxlength', '14');
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
  <input id="phone" name="phone" type="text" placeholder="Your Phone (Numbers Only)" class="phone-format" required>
</div>

Upvotes: 0

CertainPerformance
CertainPerformance

Reputation: 370889

When retrieving the value, use a regular expression to remove the leading number of it's 0 or 1:

$(this).val().replace(/^[01]/, '');


$(document).ready(function(){
  /***phone number format***/
  $(".phone-format").keypress(function (e) {
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
      return false;
    }
    var curchr = this.value.length;
    var curval = $(this).val().replace(/^[01]/, '');
    if (curchr == 3 && curval.indexOf("(") <= -1) {
      $(this).val("(" + curval + ")" + "-");
    } else if (curchr == 4 && curval.indexOf("(") > -1) {
      $(this).val(curval + ")-");
    } else if (curchr == 5 && curval.indexOf(")") > -1) {
      $(this).val(curval + "-");
    } else if (curchr == 9) {
      $(this).val(curval + "-");
      $(this).attr('maxlength', '14');
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
  <input id="phone" name="phone" type="text" placeholder="Your Phone (Numbers Only)" class="phone-format" required>
</div>

Upvotes: 0

Related Questions