Allow Textbox To Add Comma Separated Value & Validate Phone number in .NET MVC

In this artical , I will show you how to add comma seperated phonenumber in Textbox and check validation on PhoneNumber.

First create MVC project & add view for controller,

<!DOCTYPE html>
    <html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>
    <div class="row" style="margin-top:5em">
        <div class="col-md-2">
            <label>Enter Phone No.</label>
        </div>
        <div class="col-md-8">
            <input type="text" id="phonenumber" class="form-control" style="width: 40em;" onkeypress="return /^[0-9,+]*$/.test(event.key)" />
            <span id="errornumber" style="color:red"></span>
        </div>
    </div>
    <br />
    <br />
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-4">
            <button id="check">Check</button>
        </div>
    </div>
    </body>
</html>

Here, onkeypress event allow to add only number & (+ or ,) special character in Textbox.

now we add click event of button and check each textbox value which  have multiple phonenumbers.

$('#check').on('click', function () {
       debugger
       var num = $('#phonenumber').val();
       if (num != null && num != '') {
           var numbers = num.split(',');
           var phonenumber;
           var Newarray = [];
           var WArray = [];
           var status = 0;
           for (var i = 0; i < numbers.length; i++) {
               if (numbers[i] != undefined || numbers[i] != null && numbers[i] != '') {
                 
                   numbers[i] = numbers[i].replace(/-/g, "");
                   if (/^(\+91[\-\s]?)?[0]?(91)?[6-9]{1}[0-9]{9}$/.test(numbers[i])) {
                       if (numbers[i].substr(0, 3) == '+91') {
                           numbers[i] = numbers[i].replace('+91', '');
                       }
                       phonenumber=formatPhoneNumber(numbers[i]);
                       Newarray.push(phonenumber);
                   }
                   else {
                       WArray.push(numbers[i]);
                       status = 1;
                   }
               }
           }
           if (status == 1 && Newarray.length == 0) {
               $("#errornumber").html("Please Enter Valid PhoneNumber");
           }
           else {
               $("#errornumber").html('');
           }
           
           $('#phonenumber').val(Newarray.join(','));
       }
   });
   function formatPhoneNumber(value) {
       var formattedPhoneNumber = String(value);
       if (value != undefined || value != null && value != '') {
           value = value.replace(/-/i, '');
           if (value.length == 10) {
               formattedPhoneNumber = value.substring(0, 3) + '-' + value.substring(3, 6) + '-' + value.substring(6, 10);
           }
       }
       return formattedPhoneNumber;
   }

This is regex for indian local mobile number validation.

Here regular expression for phonenumber is /^(\+91[\-\s]?)?[0]?(91)?[6-9]{1}[0-9]{9}$/ , where

^                         #Match the beginning of the string
(\+91[\-\s]?)?[0]?(91)?   #Allow +91 to optional
[6-9]{1}                  #Match first digit to (6,7,8,9)
[0-9]{9}                  #Match last 9 digits to(0-9) numbers
$                         #Match the end of the string

Output:

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories