Exibir se dado já existe dentro do formulário
Eu fiz um sistema de cadastro que exibe se o username e o e-mail já foram cadastrando ou não, e caso seja, ele impede o cadastro. Mas eu gostaria que essa informação fosse exibida logo que o usuário pulasse para outro campo, sem precisar enviar todas as informações para receber este aviso. Já tentei com javascript, e também com jquery (o plugin de validação), mas como não uso bootstrap então fica difícil de fazer.
Formulário:
<!DOCTYPE HTML>
<html>
<head lang="pt-br">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/cadastro.css">
<link rel="stylesheet" type="text/css" href="css/cadastro_media.css">
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput-1.1.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#telefone").mask("(99) 99999-9999");
});
</script>
</head>
<body>
<div id="content">
<div class="box">
<div class="title">CADASTRE-SE</div>
<form id="form" name="form" method="post" action="php/inseri.php">
<div class="input">
<input type="text" name="nome" id="nome" class="input-field" required="required"/>
<label for="nome" class="label-field">Nome <div>*</div></label>
</div>
<div class="input">
<input type="text" name="sobrenome" id="sobrenome" class="input-field"/>
<label for="sobrenome" class="label-field">Sobrenome</label>
</div>
<div class="input">
<input type="text" name="username" id="username" required="required" pattern="^[a-zA-Z0-9]+$" class="input-field"/>
<label for="username" class="label-field">Username <div>*</div></label>
</div>
<div class="input">
<input type="email" name="email" id="email" class="input-field" required="required"/>
<label for="email" class="label-field">E-mail <div>*</div></label>
</div>
<div class="input">
<input type="password" name="senha" id="senha" required="required" class="input-field"/>
<label for="senha" class="label-field">Senha <div>*</div></label>
</div>
<div class="input">
<input type="text" name="telefone" id="telefone" class="input-field"/>
<label for="telefone" class="label-field">Telefone</label>
</div>
<div style="color: #ff0000; font-size: 11px;">* Campos obrigatórios</div>
<br/>
<input type="submit" name="enviar" id="enviar" value="Enviar" />
</form>
<div class="submit">Já tem conta? <a href="login.php">Entre!</a></div>
</div>
</div>
</body>
<script>
var input = document.getElementById('username');
input.oninvalid = function(event) {
event.target.setCustomValidity('Não é permitido o uso de caracteres especiais e espaço.');
}
</script>
<script src="http://arquivos.weblibras.com.br/auto/wl-min.js"></script>
<script>
var wl = new WebLibras();
</script>
</html>
Página de inserção:
<?php
include "conexao.php";
?>
<?php// captura dos dados digitados no formulário //
$nome=$_POST ['nome'];
$sobrenome=$_POST ['sobrenome'];
$username=$_POST ['username'];
$email=$_POST ['email'];
$senha=$_POST ['senha'];
$telefone=$_POST ['telefone'];
$verifica_user = mysql_query("SELECT * FROM cadastro WHERE username='$username' LIMIT 1") or die(mysql_error());
$verifica_user = mysql_num_rows($verifica_user);
$verifica_email = mysql_query("SELECT * FROM cadastro WHERE email='$email' LIMIT 1") or die(mysql_error());
$verifica_email = mysql_num_rows($verifica_email);
if($verifica_user > 0){echo "Este user já está sendo utilizado!" ;
}elseif($verifica_email > 0){echo "Esse e-mail já está sendo utilizado!";}
else{
$sql = mysql_query("INSERT INTO cadastro (nome,sobrenome,username,email,senha,telefone) VALUES ('$nome', '$sobrenome','$username','$email','$senha','$telefone')") or die(mysql_error());
$resultado = mysql_query ($sql);
header ("Location:../usuario/index.php");
}
?>Discussão (4)
Carregando comentários...