CODEWITHSUNDEEP
jqueryregexvalidation
mindfreak
mindfreak

Reputation: 455

jQuery Phone validation not working as expected

I've been trying to validate the phone number in jQuery, but for some reason the code fails to validate the condition as expected.

HTML code:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="jquery-1.11.2.js"></script>
<script type="text/javascript" src="custReg.js"></script>

<link rel="stylesheet" type="text/css" href="custRegistration.css">
</head>
<body bgcolor ="lightgray" fontcolor="red">
    <form action="" name="myForm" method="get" onsubmit="">

        <div id="container">
            <fieldset>
                <legend style="background-color: aqua;">Registration Page</legend>
    <div id="primaryContact">Primary Contact No.</div>
                <div id="alternateContact">Alternate Contact No.</div>  

                <div id="contactNoBlock">
                    <input type="text" name="primaryNumber" value="+91-" id="primaryNumber"  class="textBox1" />   <!--  -->
                    <input type="text" name="altNumber" value="+91-" id="altNumber" class="textBox1" />
                </div>

                <div id="contact_error_msg"></div>
                <br>
</div> <!-- <div id="container"> closes here  -->

        </fieldset>

    </form>
</body>
</html>

CSS code:

fieldset {
    width: 120%;
    border: solid 1px black;}

legend {
    color: black;
    font-style: italic;
    font-size: 15px;
    border: solid 1px black;
    margin: 25px; } 


.textBox1 {
    margin: 10px;
    padding: 5px;
    width: 280px;}

#primaryContact{
    margin-left:10px;
    font-style: italic;
    font-weight: bold;
    color: #a77;
    position: relative;
    top:12px;

}

#alternateContact{

    font-style: italic;
    font-weight: bold;
    color: #a77;
    position: relative;
    left: 335px;
    top:-5px;

}

jQuery code:

$(document).ready(function() {
    var altContactNo = $('#altNumber');
    var contactErrorMsg = $('#contact_error_msg');
    var regexIn = /\(?([0-9]{3})\)?([ .-]?)([0-9]{3})\2([0-9]{4})/ ;

    $(altContactNo).blur(function(){

     var value = $(altContactNo).val();  
     alert(value);


     if(value.length<=4){     
      $(contactErrorMsg).text("Please enter Alternate Contact Number");
      $(this).css('border','1px solid red');
   }

     else if(!regexIn.test(value)){
         $(contactErrorMsg).text("Only digits accepted "); 
         $(this).css('border','1px solid red');  
     }

     else if ((value.length>=4) && (value.length<=14)){
         $(contactErrorMsg).text("Number should be exact 10 digits"); 
         $(this).css('border','1px solid red'); 
    } 



     else{
          $(this).css('border','1px solid green');
          $(contactErrorMsg).text(""); 
         }

});


});

Challenges that I'm facing with this code:

  • When I enter any non-numeric digit, the code diplays the error as expected - "Only digits accepted" However, once I delete the non-numeric digit & replace it with a numeric digit, the same error message still persists, which is incorrect.

  • To let off go the above error, I need to wait till the numeric count reaches 10 digits (since I'm targetting 10 digit cell number). During this entire process, the above error message continues to show up. Let's say, if I enter number as 785 and come out of the input-box, it should throw "Number should be exact 10 digits" error-message until it reaches 10 digits count. However, this is not happening at this point of time.

  • Further, even after the count goes beyond the stipulated 10 digits mark, no error-message is displayed. What I'm wanting is, after 10-digits mark is crossed, an error-message should flash stating "Number should be exact 10 digits" and box should turn red.

How do I get the above things resolved ? Any help would be highly appreciated.

Upvotes: 0

Views: 241

Answers (2)

Jason L.
Jason L.

Reputation: 1215

You're validating against the regex and you're showing the "Only digits accepted " when it doesn't match the regex for any reason. That means you will see this message any time what is entered doesn't match, whether it is due to character choice or length or spacing.

For the same reason, you're not seeing the "Number should be exact 10 digits" message because when there are less than 10 digits, it doesn't match the regex and falls into that second if clause.

Depending on how different languages handle regex validation, some implementations will allow for multiple matches. If that is the case then "1234567890123" could match because "1234567890" matched. Try putting "^" at the start and "$" at the end of the your regex which will limit the validation to make it match one single time only.

Upvotes: 1

Wojciech Maj
Wojciech Maj

Reputation: 1122

This does not answer your question directly, but you can also verify input field based on an attribute introduced to inputs in HTML5, pattern. Like so:

<input type="tel" pattern="\+91\-[0-9]{3}[ .-][0-9]{3}[ .-][0-9]{4}" value="+91-" />

Result:

http://jsfiddle.net/wojtekmaj/g28cqnLw/

Also, in my opinion such a strict verification of a number should only be used in cases when something might go horribly wrong if the user does not type precise format you want. This is horrible for user experience.

Upvotes: 0

Related Questions