Javascript for validation

Question

Javascript for validation

Navigation

#1 by (1 votes)

0

I'm using javascript to validate some form fields like phone and CPF. The script works correctly the way I want, the problem is that when the user does not type all mask numbers the script does not clean the input, it accepts that number 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><!--SandroAlvares--><div><labelfor="tel">Telefone</label>
<input attrname="telephone1" type="text">
<br><div>
<label for="doc">CPF/CNPJ</label>
<input id="doc" type="text">

I wanted a help to make sure that if the user did not type the correct number of numbers, when he took the focus the input would erase the numbers entered.

javascript

asked by anonymous 17.01.2018 / 01:20

1 answer

Change div size when mouseover Replace "Web Browser" vb.net

score 1 · Accepted Answer

I wrote this method, but I think there is 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 changes:

I added the id attribute in the phone field.

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

Modified the selector in JavaScript.

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

Modified also 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><!--SandroAlvares--><div><labelfor="tel">Telefone</label>
<input id="tel" attrname="telephone1" type="text">
<br><div>
<label for="doc">CPF/CNPJ</label>
<input id="doc" type="text">