Leave input to Focus after Alert

Asked

Viewed 576 times

1

I have a form that is valid if the typed Cpf or cnpj is valid, but if it shows an error it changes to the next input, but I would like it to remain in the Cpf input still for validation.

Example:

$('#doc').blur(function(){
 var tam = $('#doc').val();
 if(tam > 11){
 alert('cpf invalido');
 tam = '';
 tam.focus();
 return false;
 }
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<form class="form-horizontal">
<fieldset>

<!-- Form Name -->
<legend>Form Name</legend>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="doc">Cpf | Cnpj:</label>  
  <div class="col-md-4">
  <input id="doc" name="doc" type="text" placeholder="Isnira o cpf ou cnpj" class="form-control input-md">
    
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="nome">Nome:</label>  
  <div class="col-md-4">
  <input id="nome" name="nome" type="text" placeholder="Nome completo" class="form-control input-md">
    
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="textinput">Telefone:</label>  
  <div class="col-md-4">
  <input id="textinput" name="textinput" type="text" placeholder="Telefone" class="form-control input-md">
    
  </div>
</div>

</fieldset>
</form>

jquery

2 answers

2

It had some coding errors, which was to take the value of the field and give a focus, that is, it does not represent the text box but the value contained in it, others however, was the way to use the I was wrong, so I made a minimal example so I can verify that this is what you need:

$('#doc').blur(function() {
  if ($(this).val().length > 11) {
    alert('cpf invalido');
    $(this).val('');
    $(this).focus();    
  }
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<form class="form-horizontal">
  <fieldset>

    <!-- Form Name -->
    <legend>Form Name</legend>

    <!-- Text input-->
    <div class="form-group">
      <label class="col-md-4 control-label" for="doc">Cpf | Cnpj:</label>
      <div class="col-md-4">
        <input id="doc" name="doc" type="text" placeholder="Isnira o cpf ou cnpj" class="form-control input-md">

      </div>
    </div>

    <!-- Text input-->
    <div class="form-group">
      <label class="col-md-4 control-label" for="nome">Nome:</label>
      <div class="col-md-4">
        <input id="nome" name="nome" type="text" placeholder="Nome completo" class="form-control input-md">

      </div>
    </div>

    <!-- Text input-->
    <div class="form-group">
      <label class="col-md-4 control-label" for="textinput">Telefone:</label>
      <div class="col-md-4">
        <input id="textinput" name="textinput" type="text" placeholder="Telefone" class="form-control input-md">

      </div>
    </div>

  </fieldset>
</form>

A solution with verification for CPF and CNPJ:

$('#doc').blur(function() {
  if ($(this).val().length == 0) return;
  var sts = false; 
  if ($(this).val().length == 11) {
    sts = validate_cpf($(this).val());    
  } else {
    if ($(this).val().length == 14) {
      sts = validate_cnpj($(this).val());      
    }
  }  
  if (!sts) {    
    $(this).val('');
    alert('Cpf/Cnpj invalido');
    $(this).focus();
  }
});

function validate_cnpj(cnpj) {

  cnpj = cnpj.replace(/[^\d]+/g, '');

  if (cnpj == '') return false;

  // Elimina CNPJs invalidos conhecidos
  if (cnpj.length != 14 || cnpj == "00000000000000" ||
    cnpj == "11111111111111" || cnpj == "22222222222222" ||
    cnpj == "33333333333333" || cnpj == "44444444444444" ||
    cnpj == "55555555555555" || cnpj == "66666666666666" ||
    cnpj == "77777777777777" || cnpj == "88888888888888" ||
    cnpj == "99999999999999")
    return false;

  // Valida DVs
  length = cnpj.length - 2
  numbers = cnpj.substring(0, length);
  digit = cnpj.substring(length);
  sum = 0;
  pos = length - 7;
  for (i = length; i >= 1; i--) {
    sum += numbers.charAt(length - i) * pos--;
    if (pos < 2)
      pos = 9;
  }
  result = sum % 11 < 2 ? 0 : 11 - sum % 11;
  if (result != digit.charAt(0))
    return false;

  length = length + 1;
  numbers = cnpj.substring(0, length);
  sum = 0;
  pos = length - 7;
  for (i = length; i >= 1; i--) {
    sum += numbers.charAt(length - i) * pos--;
    if (pos < 2)
      pos = 9;
  }
  result = sum % 11 < 2 ? 0 : 11 - sum % 11;
  if (result != digit.charAt(1))
    return false;

  return true;

}

function validate_cpf(strCPF) {
  var Soma;
  var Resto;
  Soma = 0;
  if (strCPF == "00000000000") return false;

  for (i = 1; i <= 9; i++) Soma = Soma + parseInt(strCPF.substring(i - 1, i)) * (11 - i);
  Resto = (Soma * 10) % 11;

  if ((Resto == 10) || (Resto == 11)) Resto = 0;
  if (Resto != parseInt(strCPF.substring(9, 10))) return false;

  Soma = 0;
  for (i = 1; i <= 10; i++) Soma = Soma + parseInt(strCPF.substring(i - 1, i)) * (12 - i);
  Resto = (Soma * 10) % 11;

  if ((Resto == 10) || (Resto == 11)) Resto = 0;
  if (Resto != parseInt(strCPF.substring(10, 11))) return false;
  return true;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<form class="form-horizontal">
  <fieldset>

    <!-- Form Name -->
    <legend>Form Name</legend>

    <!-- Text input-->
    <div class="form-group">
      <label class="col-md-4 control-label" for="doc">Cpf | Cnpj:</label>
      <div class="col-md-4">
        <input id="doc" name="doc" type="text" placeholder="Isnira o cpf ou cnpj" class="form-control input-md">

      </div>
    </div>

    <!-- Text input-->
    <div class="form-group">
      <label class="col-md-4 control-label" for="nome">Nome:</label>
      <div class="col-md-4">
        <input id="nome" name="nome" type="text" placeholder="Nome completo" class="form-control input-md">

      </div>
    </div>

    <!-- Text input-->
    <div class="form-group">
      <label class="col-md-4 control-label" for="textinput">Telefone:</label>
      <div class="col-md-4">
        <input id="textinput" name="textinput" type="text" placeholder="Telefone" class="form-control input-md">

      </div>
    </div>

  </fieldset>
</form>

1


First it is interesting to validate whether the CPF or CNPJ are valid, in the code I put two javascript functions to verify this validaCPF and validaCNPJ.

to focus on your input, that’s why:

$('#doc').focus();


jafoicnpj = true;
jafoicpf = true;

$('#doc').blur(function(){
  
});

function myFunction(){

 var tam = $('#doc').val().length;
 var tam_valor = $('#doc').val();
 
 if(tam < 8){
  return false;
 }
 
 var podecontinuar = false;
 
 if(tam == 14){
    podecontinuar = validarCNPJ(tam_valor);
    if(!podecontinuar && jafoicnpj){alert('nao é um cnpj valido')};
    jafoicnpj = false;
 }
 
 if(tam == 11){
    podecontinuar = TestaCPF(tam_valor);
    if(!podecontinuar){alert('nao é um cpf valido')};
    jafoicpf = false;
 }
 
 if(!podecontinuar){
  
   $('#doc').focus();
 }

}


function validarCNPJ(cnpj) {

	cnpj = cnpj.replace(/[^\d]+/g,'');

	if(cnpj == '') return false;
	
	if (cnpj.length != 14)
		return false;

	// Elimina CNPJs invalidos conhecidos
	if (cnpj == "00000000000000" || 
		cnpj == "11111111111111" || 
		cnpj == "22222222222222" || 
		cnpj == "33333333333333" || 
		cnpj == "44444444444444" || 
		cnpj == "55555555555555" || 
		cnpj == "66666666666666" || 
		cnpj == "77777777777777" || 
		cnpj == "88888888888888" || 
		cnpj == "99999999999999")
		return false;
		
	// Valida DVs
	tamanho = cnpj.length - 2
	numeros = cnpj.substring(0,tamanho);
	digitos = cnpj.substring(tamanho);
	soma = 0;
	pos = tamanho - 7;
	for (i = tamanho; i >= 1; i--) {
	  soma += numeros.charAt(tamanho - i) * pos--;
	  if (pos < 2)
			pos = 9;
	}
	resultado = soma % 11 < 2 ? 0 : 11 - soma % 11;
	if (resultado != digitos.charAt(0))
		return false;
		
	tamanho = tamanho + 1;
	numeros = cnpj.substring(0,tamanho);
	soma = 0;
	pos = tamanho - 7;
	for (i = tamanho; i >= 1; i--) {
	  soma += numeros.charAt(tamanho - i) * pos--;
	  if (pos < 2)
			pos = 9;
	}
	resultado = soma % 11 < 2 ? 0 : 11 - soma % 11;
	if (resultado != digitos.charAt(1))
		  return false;
		  
	return true;
   
}


function TestaCPF(strCPF) {
    var Soma;
    var Resto;
    Soma = 0;
	if (strCPF == "00000000000") return false;
    
	for (i=1; i<=9; i++) Soma = Soma + parseInt(strCPF.substring(i-1, i)) * (11 - i);
	Resto = (Soma * 10) % 11;
	
    if ((Resto == 10) || (Resto == 11))  Resto = 0;
    if (Resto != parseInt(strCPF.substring(9, 10)) ) return false;
	
	Soma = 0;
    for (i = 1; i <= 10; i++) Soma = Soma + parseInt(strCPF.substring(i-1, i)) * (12 - i);
    Resto = (Soma * 10) % 11;
	
    if ((Resto == 10) || (Resto == 11))  Resto = 0;
    if (Resto != parseInt(strCPF.substring(10, 11) ) ) return false;
    return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<form class="form-horizontal">
<fieldset>

<!-- Form Name -->
<legend>Form Name</legend>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="doc">Cpf | Cnpj:</label>  
  <div class="col-md-4">
  <input id="doc" name="doc" type="text" onkeyup="myFunction()" placeholder="Isnira o cpf ou cnpj" class="form-control input-md">
    
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="nome">Nome:</label>  
  <div class="col-md-4">
  <input id="nome" name="nome" type="text" placeholder="Nome completo" class="form-control input-md">
    
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="textinput">Telefone:</label>  
  <div class="col-md-4">
  <input id="textinput" name="textinput" type="text" placeholder="Telefone" class="form-control input-md">
    
  </div>
</div>

</fieldset>
</form>

  • I made an edit in my reply because I had found a mistake.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.