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
– Nishant Dixit, Commented Apr 2, 2018 at 15:36
@Endless Thanks for this. I didn't know I had `type="phone". — Paul
– Paul, Commented Apr 2, 2018 at 17:52

Mohammad Ali Rony · Accepted Answer · 2018-04-02 16:05:58Z

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.

Rakesh Gupta · Accepted Answer · 2018-04-02 16:17:46Z

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, 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.
The quality of your answer is your business. I'm simply pointing out how your live demo is incorrectly constructed.

Collectives™ on Stack Overflow

How to get jQuery validate to allow numbers to include dashes

2 Answers 2

1 Comment

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Linked

Related