Validate field after typing

Question

I’m using the Bootstrap Validator, the validation of the form is working very well. However, I wanted the validation of the field nome is executed only when the user has finished typing.

Validation of this field makes a request ajax synchronously, and this makes a couple of locks during typing.

$("#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>

Answer 1

Calls the function of checking the "name" field only when the user clicks out of the field.

Use "onblur" to do this.

<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
                >

Answer 2

I managed to make it work by manipulating events keydown, keyup and focus.

I just add the validation existingname in the Bootstrap Validator when the user type at least one letter and stay 1 second without typing anything. When the user clicks on a button or enters the field I remove the validation.

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>