John Pinto John Pinto - 4 months ago 15
Javascript Question

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.

Answer

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