1

Estou com um simples form, para validar se um nome e email existem.

function valida_nome(){
	var filter_nome = /^([a-zA-Zà-úÀ-Ú0-9]|\s)+$/ ;
	if(!filter_nome.test(document.getElementById("input_nome_cad").value)){
	document.getElementById("input_nome_cad").value='';
	document.getElementById("input_nome_cad").placeholder = "Nome inválido";
	document.getElementById("input_nome_cad").style.borderColor = "#ff0000";
	document.getElementById("input_nome_cad").style.outline = "#ff0000";
	document.getElementById("input_nome_cad").focus();
	document.getElementById("input_nome_cad").onkeydown = function keydown_nome(){
	 	document.getElementById("input_nome_cad").style.borderColor = "#999999";
		document.getElementById("input_nome_cad").style.outline = null;
		}
		
	}
	
}
<!DOCTYPE html>
  <html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title></title>
</head>
<body>
<script type="text/javascript" src="valida_ajax_js.js"></script>
<div id="Container">
  <h1>Agenda de Contatos utilizando AJAX</h1>
  <hr/>
  <h2>Pesquisar Contato:</h2>
  <form id="form_user_cad" name="form_user_cad" method="POST"  action="">
	<input type="text" id="input_nome_cad" name="nome_cad" placeholder="Nome e Sobrenome"    autofocus   onblur="valida_nome()"><br/>
	<input type="text" id="input_email_cad"	name="email_cad" placeholder="Insira o Email" ><br/>
	<input type="submit" class="btn_enviar_cad"	 name="enviar_cad"  value="Criar Conta">
   </form>
  </div>
 </body>
</html>

Se tentar digitar algum dos caracteres especiais verá que não é possível.

Até aqui está exatamente como eu quero, pois o usuário não pode avançar para outro campo enquanto não preencher corretamente o campo.

A seguir, o código do Ajax para verificar se o nome que foi digitado corretamente já existe, caso não exista, pode prosseguir ao próximo campo, mas se existir quero que tenha o mesmo comportamento da verificação dos caracteres, ou seja o usuário não consiga avançar.

Código Ajax

function CriaRequest() {
	try{
	request = new XMLHttpRequest();        
	}catch (IEAtual){
		try{
        request = new ActiveXObject("Msxml2.XMLHTTP");       
        }catch(IEAntigo){
        	try{
            request = new ActiveXObject("Microsoft.XMLHTTP");          
            }catch(falha){
             request = false;
            }
        }
    }
    if (!request) 
    alert("Seu Navegador não suporta Ajax!");
    else
    return request;
}
function nome_existe() {
	var nome = document.getElementById("input_nome_cad").value;
	var xmlreq = CriaRequest();
	xmlreq.open("GET", "mysqli_select_ajax.php?nome_cad=" + nome, true);
	xmlreq.onreadystatechange = function(){
		if (xmlreq.readyState == 4) {
	    	if (xmlreq.status == 200) {
		    document.getElementById("input_nome_cad").value="";
		    document.getElementById("input_nome_cad").placeholder = xmlreq.responseText;
		    document.getElementById("input_nome_cad").style.borderColor = "#ff0000";
			document.getElementById("input_nome_cad").style.outline = "#ff0000";
			return true;
			}
		}
	};
	xmlreq.send(null);
}

E o código do banco com php

<?php
// Verifica se existe a variável txtnome
if (isset($_GET["nome_cad"])) {
    $nome = $_GET["nome_cad"];
    // Conexao com o banco de dados
    $server = "localhost";
    $user = "root";
    $senha = "";
    $base = "bd_";
	
	$con = mysqli_connect($server, $user, $senha, $base);
	
	// Check connection
	if (mysqli_connect_errno())
  	{
  	echo "Failed to connect to MySQL: " . mysqli_connect_error();
  	}
	
	if (!empty($nome)) {
       $sql = "SELECT * FROM usuarios WHERE nome_cad like '$nome' ";
    }else{
	echo "Insira um nome";
	return;
	}   
    
    $result = mysqli_query($con, $sql);
    $linha = mysqli_fetch_assoc($result);
    if($linha['nome_cad'] != $nome ){        
    	echo $nome;
    }else {
        // Se a consulta não retornar nenhum valor, exibi mensagem para o usuário
        echo "Nome já existe!";
    }
} 
?>

A dúvida

Como eu junto a função valida_nome() com a função do AJax, para que a função nome_existe() seja inicializada após a 1º checagem ter sido realiza e à partir do "onblur" do input name="nome_cad"?

O arquivo do banco está ok, e o ajax tmb, pois se eu separar eles desta função valida_nome, eles funcionam direitinho, faz a checagem e se tiver o nome no banco ele avisa, se não ele retorna o nome digitado.

O problema mesmo é juntar para eles funcionarem na sequência mencionada acima.

1 Resposta 1

1

Acrescente um return false, caso não seja válido, e return true caso seja válido:

function valida_nome(){
    var filter_nome = /^([a-zA-Zà-úÀ-Ú0-9]|\s)+$/ ;
    if(!filter_nome.test(document.getElementById("input_nome_cad").value)){
        document.getElementById("input_nome_cad").value='';
        document.getElementById("input_nome_cad").placeholder = "Nome inválido";
        document.getElementById("input_nome_cad").style.borderColor = "#ff0000";
        document.getElementById("input_nome_cad").style.outline = "#ff0000";
        document.getElementById("input_nome_cad").focus();
        document.getElementById("input_nome_cad").onkeydown = function keydown_nome(){
            document.getElementById("input_nome_cad").style.borderColor = "#999999";
            document.getElementById("input_nome_cad").style.outline = null;
        }
        return false;
    }
    return true;
}

Depois na nome_existe() pode colocar isto logo na abertura:

function nome_existe() {
    if(!valida_nome()) { // caso seja inválido
       alert('Nome Invalido');
       return;
    }
    ...
}

E, se percebi bem no onblur do input fica:

onblur="nome_existe()"
4
  • Opsss, periii, tho ver..
    – MagicHat
    Commented 6/06/2016 às 22:34
  • Acho que deu belooo, thô só configurar direitinho aqui....
    – MagicHat
    Commented 6/06/2016 às 22:39
  • Nota 10 perfect....Vlw ;)
    – MagicHat
    Commented 6/06/2016 às 22:41
  • De nada @MagicHat ..
    – Miguel
    Commented 7/06/2016 às 8:36

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 .