How to get jQuery validate to allow numbers to include dashes

Question

I found this question being asked before and saw the recommendation was to add a method called alphanumeric. I tried adding this method, but the validation will still not accept phone numbers with dashes.

Does anyone see what I am doing wrong?

$('#phone').keyup(function() {
  jQuery.validator.addMethod("alphanumeric", function(value, element) {
   return this.optional(element) || /^[a-z0-9\-]+$/i.test(value);
  }, "Numbers and dashes only");
 });
  $('#salesforce_submit').validate({
  rules: {
   phone: {
    required: true,
    //digits: true,
    minlength: 10,
    alphanumeric: true  
   }
  },
  messages: {
   phone: {
    required: "Please enter your phone number",
    digits: "Please enter a valid phone number with only numbers",
    minlength: "Your number seems a bit short, doesn't it?"
   }
  },
  submitHandler: function(form) {
   event.preventDefault();
   var datastring = $('#salesforce_submit').serialize();
   $.ajax({
    url: '/php/quoteSend.php',
    type: 'POST',
    data: datastring
    ,
    success: function(data) {
     console.log(data);
     if (data == 'Error!') {
      alert('Unable to submit form!');
     } else {
     }
    },
    error: function(xhr, textStatus, errorThrown) {
     alert(textStatus + '|' + errorThrown);
     console.log('error');
    }
   });
   }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<form id="salesforce_submit" method="POST" enctype="multipart/form-data">
  <div><input id="phone" placeholder="Phone*" class="input block" maxlength="12" name="phone" type="phone"></div>
    <input type="Submit" Value="Submit">
</form>

Any number "phone numbers with dashes." in which you are getting error? — Nishant Dixit, Apr 02 '18 at 15:36
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel — Endless, Apr 02 '18 at 17:50
@Endless Thanks for this. I didn't know I had `type="phone". — Paul, Apr 02 '18 at 17:52
well, it should be tel, and I wouldn't worry about any pattern, there is too many ways to enter a phone number... Adding [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete) attribute to the list helps user to quickly enter the correct format also — Endless, Apr 02 '18 at 17:55

score 3 · Answer 1 · answered Apr 02 '18 at 16:05

You can use this code for allowing numbers and dashes

jQuery.validator.addMethod("numericdashe", function (value, element) {
console.log(value);
  if (/^[0-9\-]+$/i.test(value)) {
      return true;
  } else {
      return false;
  };
}, "Numbers and dashes only");

add numericdashe role

phone: {
            required: true,
            //digits: true,
            minlength: 10,
            //alphanumeric: true
            numericdashe: true      
        }
    },

no need add jQuery.validator.addMethod inside keyup listener.

Thank you for recognizing and calling out the OP's `keyup` mistake. — Sparky, Apr 02 '18 at 19:16

score 0 · Accepted Answer · answered Apr 02 '18 at 16:17

You have problem with your regex.

This regex works: /^[+][(]{0,1}[0-9]{1,3}[)]{0,1}[-\s./0-9]$/i

working fiddle

$('#phone').keyup(function() {
  jQuery.validator.addMethod("alphanumeric", function(value, element) {
   return this.optional(element) || /^[+]*[(]{0,1}[0-9]{1,3}[)]{0,1}[-\s\./0-9]*$/i.test(value);
  }, "Numbers and dashes only");
 });
  $('#salesforce_submit').validate({
  rules: {
   phone: {
    required: true,
    //digits: true,
    minlength: 10,
    alphanumeric: true  
   }
  },
  messages: {
   phone: {
    required: "Please enter your phone number",
    digits: "Please enter a valid phone number with only numbers",
    minlength: "Your number seems a bit short, doesn't it?"
   }
  },
  submitHandler: function(form) {
   event.preventDefault();
   var datastring = $('#salesforce_submit').serialize();
      
   $.ajax({
    url: '/php/quoteSend.php',
    type: 'POST',
    data: datastring
    ,
    success: function(data) {
     console.log(data);
     if (data == 'Error!') {
      alert('Unable to submit form!');
     } else {
     }
    },
    error: function(xhr, textStatus, errorThrown) {
     alert(textStatus + '|' + errorThrown);
     console.log('error');
    }
   });
   }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<form id="salesforce_submit" method="POST" enctype="multipart/form-data">
  <div><input id="phone" placeholder="Phone*" class="input block" maxlength="12" name="phone" type="phone"></div>
    <input type="Submit" Value="Submit">
</form>

You've kept the OP's incorrect structure in your answer. FYI, there is no point in firing `.addMethod()` every single time a key is pressed within one specific field. Just fire it once to create the new rule. — Sparky, Apr 02 '18 at 18:37
@Sparky, the OP specifically asked to spot what is wrong with her / his code to make it not to work. I just pointed out where exactly it is wrong. Not sure if OP asked for making significant changes to his or her code. — Rakesh Gupta, Apr 02 '18 at 18:55
The quality of your answer is your business. I'm simply pointing out how your live demo is incorrectly constructed. — Sparky, Apr 02 '18 at 19:00

How to get jQuery validate to allow numbers to include dashes

2 Answers2