I use Inputmask to create a mask for the phone input field. Everything works fine, but when I need to check how many digits are entered, the result is always 18, because all characters are taken into account, including the characters of the mask itself. How can I make a validation so that I can catch the number of digits entered by the user without taking the mask into account? I tried to do .replace() first and then catch the number, but it doesn't work
let inputs = document.querySelectorAll('input[type="tel"]')
if (inputs) {
for (let index = 0; index < inputs.length; index++) {
const input = inputs[index];
let im = new Inputmask('+7 (999) 999-99-99');
input.addEventListener('focus', function () {
im.mask(input);
})
input.addEventListener('blur', function () {
im.mask(input).remove();
})
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.5/jquery.inputmask.min.js"></script>
<form action="" method="POST">
<input type="tel" required name="" class="phone" data-validate-field="tel">
<button type="submit">submit</button>
</form>Translated with www.DeepL.com/Translator (free version)
The option you're looking for is autoUnmask. Set it to true, and you'll be able to get the value without the mask.
From docs:
Automatically unmask the value when retrieved.
See working code snippet below:
$('input[type="tel"]').inputmask('+7 (999) 999-99-99', { autoUnmask: true });
$('button[type="submit"]').on('click', () => {
let telInput = $('input[type="tel"]').val();
console.log(telInput);
return false;
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.7/jquery.inputmask.min.js"></script>
<form action="" method="POST">
<input type="tel" required name="" class="phone" data-validate-field="tel">
<button type="submit">submit</button>
</form>