Javascript for validation

Question

I’m using javascript to validate some form fields like phone and CPF. The script works correctly the way I want it, the problem is that when the user does not type all the numbers in the script so the script does not clean the input, it accepts that amount of numbers.

Take the test

function inputHandler(masks, max, event) {
	var c = event.target;
	var v = c.value.replace(/\D/g, '');
	var m = c.value.length > max ? 1 : 0;
	VMasker(c).unMask();
	VMasker(c).maskPattern(masks[m]);
	c.value = VMasker.toPattern(v, masks[m]);
}

var telMask = ['(99) 9999-99999', '(99) 99999-9999'];
var tel = document.querySelector('input[attrname=telephone1]');
VMasker(tel).maskPattern(telMask[0]);
tel.addEventListener('input', inputHandler.bind(undefined, telMask, 14), false);

var docMask = ['999.999.999-999', '99.999.999/9999-99'];
var doc = document.querySelector('#doc');
VMasker(doc).maskPattern(docMask[0]);
doc.addEventListener('input', inputHandler.bind(undefined, docMask, 14), false);

div {
  font-family: Arial;
  padding: 5px;
  margin-bottom: 10px;
}  
input {
  box-sizing: border-box;
  padding: 10px;
  border-radius: 5px;
  border-color: black;
  width: 250px;
  font-size: 1.3em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-masker/1.1.0/vanilla-masker.min.js"></script>
<!-- Sandro Alvares -->
<div>
<label for="tel">Telefone</label>
<input attrname="telephone1" type="text">
<br><div>
<label for="doc">CPF/CNPJ</label>
<input id="doc" type="text">

I wanted help to make sure that if the user didn’t type the correct number, when he took the focus the input erased the numbers typed.

Answer 1

I wrote this method, but I think there’s a more dynamic way.

function limpaCampo(event) {
  var value = event.target.value,
      tamanhoA, tamanhoB;
  if (event.target.id === 'tel') {
    tamanhoA = telMask[0].length;
    tamanhoB = telMask[1].length;
  }
  if (event.target.id === 'doc') {
    tamanhoA = docMask[0].length;
    tamanhoB = docMask[1].length;
  }
  if (value.length < tamanhoA || value.length > tamanhoA && value.length < tamanhoB) {
    event.target.value = '';
  }
}

tel.addEventListener('blur', limpaCampo);
doc.addEventListener('blur', limpaCampo);

I’ve made the following modifications:

1. I added the attribute id in the phone field.

   <input id="tel" attrname="telephone1" type="text">
   

2. Modified selector in Javascript.

   var tel = document.querySelector('#tel');
   

3. Also modified the masks that were with the wrong number of digits.

   var telMask = ['(99) 9999-99999', '(99) 99999-9999'];
   var docMask = ['999.999.999-999', '99.999.999/9999-99'];
   

   To:

   var telMask = ['(99) 9999-9999', '(99) 99999-9999'];
   var docMask = ['999.999.999-99', '99.999.999/9999-99'];
   

See working:

function inputHandler(masks, max, event) {
  var c = event.target;
  var v = c.value.replace(/\D/g, '');
  var m = c.value.length > max ? 1 : 0;
  current_mask = masks[m];
  VMasker(c).unMask();
  VMasker(c).maskPattern(masks[m]);
  c.value = VMasker.toPattern(v, masks[m]);
}

function limpaCampo(event) {
  var value = event.target.value,
      tamanhoA, tamanhoB;
  if (event.target.id === 'tel') {
    tamanhoA = telMask[0].length;
    tamanhoB = telMask[1].length;
  }
  if (event.target.id === 'doc') {
    tamanhoA = docMask[0].length;
    tamanhoB = docMask[1].length;
  }
  if (value.length < tamanhoA || value.length > tamanhoA && value.length < tamanhoB) {
    event.target.value = '';
  }
}

var telMask = ['(99) 9999-9999', '(99) 99999-9999'];
var docMask = ['999.999.999-99', '99.999.999/9999-99'];
var tel = document.querySelector('#tel');
var doc = document.querySelector('#doc');

VMasker(tel).maskPattern(telMask[0]);
VMasker(doc).maskPattern(docMask[0]);

tel.addEventListener('input', inputHandler.bind(undefined, telMask, 14), false);
doc.addEventListener('input', inputHandler.bind(undefined, docMask, 14), false);

tel.addEventListener('blur', limpaCampo);
doc.addEventListener('blur', limpaCampo);

div {
  font-family: Arial;
  padding: 5px;
  margin-bottom: 10px;
}  
input {
  box-sizing: border-box;
  padding: 10px;
  border-radius: 5px;
  border-color: black;
  width: 250px;
  font-size: 1.3em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-masker/1.1.0/vanilla-masker.min.js"></script>
<!-- Sandro Alvares -->
<div>
<label for="tel">Telefone</label>
<input id="tel" attrname="telephone1" type="text">
<br><div>
<label for="doc">CPF/CNPJ</label>
<input id="doc" type="text">