0

Estou utilizando o Bootstrap Validator, a validação do formulario esta funcionando muito bem. Porém, eu queria que a validação do campo nome seja executada somente quando o usuário terminar de digitar.

A validação desse campo faz uma requisição ajax de forma síncrona, e isso faz dar umas travadas durante a digitação.

$("#frmImovel").validator({
		disable: false,
		custom: {
			existingName: function($el) {
				var teste = "";
				$.ajax({
					url: 'https://www.hobbietech.com.br/VitrineImoveis/adm/data-remote-validations/nome_imovel_existente.php',
					datatype: 'json',
					data: {
						idImovel: $el.data("existingname"),
						nome: $el.val()
					},
					async: false,
					success: function (response) {
						response = JSON.parse(response);
						if (response.result === false) {
							teste = response.mensagem;
						}
					}
				});
				
				return teste;
			}
		}
	});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://www.hobbietech.com.br/VitrineImoveis/adm/js/validator.min.js"></script>

<form id="frmImovel" data-toggle="validator" role="form">
<div class="form-group col-md-4">
		    		<label for="txtNome" class="control-label">Nome</label>
		    		<input id="txtNome" name="nome" class="form-control"
		    			data-existingname="0"
		    			placeholder="Nome do Imóvel" type="text"
		    			data-required-error="Por favor, informe o nome do imóvel!"
		    			data-remote-error="Já existe um imóvel com este nome!"
		    			required
		    		>
		    		<div class="help-block with-errors"></div>
		  		</div>
</form>

2 Respostas 2

2

Chama a função de verificar o campo do "nome" somente quando o usuário clicar para fora do campo.

Use o "onblur" para fazer isso.

<input id="txtNome" onblur="myFunction()" name="nome" class="form-control"
                    data-existingname="0"
                    placeholder="Nome do Imóvel" type="text"
                    data-required-error="Por favor, informe o nome do imóvel!"
                    data-remote-error="Já existe um imóvel com este nome!"
                    required
                >
2
  • Não é bem isso, mas sua resposta me fez ter uma ideia e essa ideia funcionou, postei uma resposta de como consegui fazer. 31/07/2017 às 17:02
  • Ué, então tudo bem hauhauhauahau 31/07/2017 às 17:11
0

Consegui fazer funcionar manipulando os eventos keydown, keyup e focus.

Eu só adiciono a validação existingname no Bootstrap Validator quando o usuário digitar ao menos uma letra e ficar 1 segundo sem digitar nada. Quando o usuário clicar em algum botão ou entrar no campo eu removo a validação.

var typingTimer;

$("#frmImovel").validator({
		disable: false,
		custom: {
			existingName: function($el) {
				var teste = "";
				$.ajax({
					url: 'https://www.hobbietech.com.br/VitrineImoveis/adm/data-remote-validations/nome_imovel_existente.php',
					datatype: 'json',
					data: {
						idImovel: $el.data("existingname"),
						nome: $el.val()
					},
					async: false,
					success: function (response) {
						response = JSON.parse(response);
						if (response.result === false) {
							teste = response.mensagem;
						}
					}
				});
				
				return teste;
			}
		}
	});
  
  $('#frmImovel #txtNome').keyup(function() {
						if ($('#myInput').val) {
							typingTimer = setTimeout(function(){
								$('#frmImovel #txtNome').attr("data-existingname", 0);
								$('#frmImovel').validator('update');
								$('#frmImovel').validator('validate');
							}, 1000);
						}
					}).keydown(function() {
						clearTimeout(typingTimer);
						$('#frmImovel #txtNome').removeAttr("data-existingname");
						$('#frmImovel').validator('update');
					}).focus(function() {
						$('#frmImovel #txtNome').removeAttr("data-existingname");
						$('#frmImovel').validator('update');
					});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://www.hobbietech.com.br/VitrineImoveis/adm/js/validator.min.js"></script>

<form id="frmImovel" data-toggle="validator" role="form">
<div class="form-group col-md-4">
		    		<label for="txtNome" class="control-label">Nome</label>
		    		<input id="txtNome" name="nome" class="form-control"
		    			data-existingname="0"
		    			placeholder="Nome do Imóvel" type="text"
		    			data-required-error="Por favor, informe o nome do imóvel!"
		    			data-remote-error="Já existe um imóvel com este nome!"
		    			required
		    		>
		    		<div class="help-block with-errors"></div>
		  		</div>
</form>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .