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.