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>

Answer 1

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>

Answer 2

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.