I have a textarea field in a form where I can copy paste (or type) mobile numbers. It will have one number per line, like this I can copy paste (or type) thousands of mobile numbers to submit in that form.
I want to trim that field, I only want 10 digit numbers to remain in that field after copy paste (or type).
Only valid 10 digit numbers should remain and all other invalid numbers should automatically remove from that field.
Example:
If I paste this numbers in this textarea field,
9848012345
9949123450
9949 123456
99491234
99491234561
+1236547890
9848098765
From this only 10 digit numbers should remain in field, like this:
9848012345
9949123450
9848098765
<div class="form-group row">
<label for="title" class="col-lg-2 col-form-label">Mobile Numbers </label>
<div class="col-lg-10">
<textarea onKeyUp="countline()" type="text" class="form-control required" required
cols="10" rows="7" id="mobileno" name="mobileno"> </textarea>
</div>
</div>
<div class="form-group row">
<label class="col-lg-2 control-label " for="userName">Number Count </label>
<div class="col-lg-10">
<input type="text" class="form-control " readonly id="numbercount" required name="numbercount" value="">
</div>
</div>
Using this script (onKeyUp="countline()") to count numbers (lines). Need to keep this also.
<script>
function countline() {
var length = $('#mobileno').val().split("\n").length;
document.getElementById("numbercount").value = length;
}
</script>
Any help please. Thanks in advance.
This produces the desired output however it does not count the digits, only the characters.
const
textArea = document.getElementById("mobileno"),
validateEl = document.getElementById("validate");
validateEl.addEventListener("click", validate);
function validate(e) {
const filtered = textArea.value
.split("\n")
.filter(number => number.length === 10)
.join("\n");
textArea.value = filtered;
}<div class="form-group row">
<label for="title" class="col-lg-2 col-form-label">Mobile Numbers </label>
<div class="col-lg-10">
<textarea type="text" class="form-control required" required
cols="10" rows="7" id="mobileno" name="mobileno"></textarea>
<button id="validate">Validate</button>
</div>
</div>