Validate field after typing

Question

Validate field after typing

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

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

The validation of this field makes a request ajax synchronously, and this causes some brakes to occur 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><linkhref="//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><formid="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>

javascript bootstrap-validator

asked by anonymous 30.07.2017 / 23:22

2 answers

2

Calls the function to check 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
                >

31.07.2017 / 14:15

Itau ShopLine ticket integration in PHP include failed to open stream

score 0 · Accepted Answer

I was able to work by manipulating events keydown , keyup and focus .

I only add validation existingname to Bootstrap Validator when the user types at least one letter and stays 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><linkhref="//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><formid="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>