JQuery Validator Plugin Phone Validation

jquery html forms validation jquery-validate

40,097

Solution 1

You are using the phoneUS validation method for the phone number, which accepts both of the inputs below (examples):

949-101-2020
9491012020

Since the first example is considered valid, you attempt to store it directly into your database, and it seems that you are using an integer or number column. Many databases, including MySQL will attempt to coerce that value into an integer by simply dropping everything after the first non-numeric character. I always recommend using a varchar field for storing phone numbers because the numbers don't really have a numeric meaning (ie you're never going to add/subtract).

Also, it's a bad idea to simply rely on client side validation. You always want to validate your data on the server side because it's very trivial to trick client side validation (maliciously or not).

Solution 2

Here is a custom validation for phone template:

jQuery.validator.addMethod("phone", function (phone_number, element) {
        phone_number = phone_number.replace(/\s+/g, "");
        return this.optional(element) || phone_number.length > 9 &&
              phone_number.match(/^\(?[\d\s]{3}-[\d\s]{3}-[\d\s]{4}$/);
    }, "Invalid phone number");

ex: 123-123-1234

And here is a format with country prefix :

  jQuery.validator.addMethod("phoneUS", function (phone_number, element) {
      phone_number = phone_number.replace(/\s+/g, "");
      return this.optional(element) || phone_number.length > 9 &&
      phone_number.match(/^\+[0-9]{11}$/);
  }, "Please specify a valid phone number");

Just add the phoneUS class to the imput ex +41748987145

This method is an extension for jquery validation. In this way you define your own custom rules. Belive me, there are situations where you need them.

Solution 3

If the database field is holding integers and you're sending stuff like "987-123-1223", depending on your db engine only the first digits will be stored.

I've had this problem myself already! You can fix it on the server side using simple string replacement methods!

40,097

Author by

Richard

Updated on July 09, 2022

Comments

Richard almost 2 years

I'm having issues with the jquery validator validating phone numbers. So in a form where I have an input for phone number, I use jquery's additional methods to validate the phone. Here's the code:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>stuff/title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(e) {
    var val = $('#everything').validate({
        onkeyup: false,
        errorClass: "req_mess",
        ignore: ":hidden",
        rules: {
            phone: {
                required: true,
                minlength: 10,
                phoneUS: true
            }
        },
        messages: {
            phone: {
                required: "Please enter your phone number",
                phoneUS: "Please enter a valid phone number: (e.g. 19999999999 or 9999999999)"
            }
        }
    });
});
</script>
<form name="everything" id="everything" action="Private/Insert.php" method="post" style="display:none;" >
    Phone Number: <input type="text" name="phone" id="phone"/>
</form>
</body>
</html>

And the database ends up looking like this for the phone number column:
Phones
Sometimes it inserts the full phone number (crossed out in red) properly, but then sometimes it just inserts 3 digits. I don't know why. Is this something to do with Internet Explorer maybe? Has anyone come across this problem? Does anyone know why this is happening? Here's the entirety of the jquery validation code if anyone needs it

William Lawn Stewart over 11 years

If this is in fact the case, then Richard should really be using a string type for storing phone numbers, as leading zeroes can matter, but will be lost when storing into a numeric field.
Richard over 11 years

perfect, that was the problem. Added some server side validation along with changing column to varchar. Worked correctly, thanks a lot. Well deserved rep!