CODEWITHSUNDEEP
javascriptjqueryhtmlvalidation
John Pinto
John Pinto

Reputation: 43

Checking Duplicate & valid Numbers in Textarea using jQuery

I'm developing a jQuery validation on a textarea which contains 10 digit mobile numbers line by line

i used this code to make sure after every 10 digit new line occur.

 $('#mobile_numbers').keyup(function () {

        if (/\D/g.test(this.value))
        {
            this.value = this.value.replace(/\D/g, '');
        }

        this.value = this.value
            .replace(/[\n\r]+/g, "")
            .replace(/(.{10})/g, "$1\n");
    });

The above code also force to enter only numric value and after every 10th digit it adds new line.

Everything is working fine but i'm stuck in the situation that

1) I'm trying to check the mobile numbers are valid or not the condition for that is it should start from 7 or 8 or 9 and it contain 10 digit per line and if not i will remove it.

2) Also i'm trying to count duplicate number & valid number across the data in textarea using jquery and showing the output in HTML as

Eg: (User type in text area)
7777777777
8888888888
9999999999
7777777776
6601145591 // Invalid (should start with 7/8/9 & 10 digit)
5566887744 //Invalid
664433     //Invalid
8888888886
9999999996
9999999996
8888888886

Output:
<h1>Total number: 11<h1>
<h1>Duplicate number: 2<h1>
<h1>Valid number: 6<h1>

I don't know the thing i'm trying is possible or not. If possible how to do this, I will do it myself if i can get the documentation link. But i'm afraid to code this as i'm a back end developer i'm checking everything in PHP but i want to make sure the validation at client side also using jQuery.

Thanks in advance.

Upvotes: 4

Views: 1544

Answers (2)

Ahmed Magdy
Ahmed Magdy

Reputation: 6030

If you want to work with Phone Number so Google libphonenumber is the best solution. It does support JavaScript and Java and here is a JavaScript DEMO.

Library link: https://github.com/googlei18n/libphonenumber

Code example:

var phoneUtil = i18n.phonenumbers.PhoneNumberUtil.getInstance();
var number = phoneUtil.parseAndKeepRawInput(phoneNumber, "US");
var isValidNumber = phoneUtil.isValidNumber(number);
if (isValidNumber) {
    var formattedNumber = phoneUtil.format(number,  18n.phonenumbers.PhoneNumberFormat.E164);
    return formattedNumber;
}

Upvotes: 0

Naveed
Naveed

Reputation: 919

Here is how you can achieve it:

        $('#mobile_numbers').keyup(function () {
            if (/\D/g.test(this.value)) {
                this.value = this.value.replace(/\D/g, '');
            }
            this.value = this.value
                    .replace(/[\n\r]+/g, "")
                    .replace(/(.{10})/g, "$1\n");
            validateNumbers();
        });
        function validateNumbers() {
            var value = $("#mobile_numbers").val();
            var numbersArray = value.split('\n');
            var validNumbers = [];
            var duplicateNumbers = [];
            var inValidNumbers = [];

            // remove empty elements
            var index = numbersArray.indexOf("");
            while(index !== -1)
            {
                numbersArray.splice(index,1);
                index = numbersArray.indexOf("");
            }

            for (var $i = 0; $i < numbersArray.length; $i++) {
                var number = numbersArray[$i];
                if (validNumbers.indexOf(number) !== -1 || inValidNumbers.indexOf(number) !== -1) {
                    duplicateNumbers.push(number);
                } else if (number.match(/[789]\d{9}/)) {
                    validNumbers.push(number);
                } else {
                    inValidNumbers.push(number);
                }
            }
            $("#total").text(numbersArray.length);
            $("#duplicate").text(duplicateNumbers.length);
            $("#valid").text(validNumbers.length);
            $("#invalid").text(inValidNumbers.length);
        }

Full working demo: https://plnkr.co/edit/u4hN9QGqOZJ4Sx6F7K90?p=preview

Upvotes: 2

Related Questions