Fazer verificação de um formulário sem refresh

Camilavip · Agosto 15, 2020

Boa noite,

Alguém tem uma solução para um formulário na dar refresh antes de fazer uma consulta?

No formulário que tenho ele verifica se no banco de dados já existe um login ou email , assim não cadastro duplicado um cliente, mas ele da um refresh quando insiro os dados e clico no botão de cadastrar, se estiver ok ele cadastra, se ele verificar um login ou email iguais no banco de dados ele volta a página avisando, mas acaba que assim ele apaga todos os dados inseridos, e tenho de digitar tudo novamente, queria que ele fizesse a consulta sem dar o refresh.

<?php
session_start();
ob_start();
$btnCadUsuario = filter_input(INPUT_POST, 'btnCadUsuario', FILTER_SANITIZE_STRING);
if($btnCadUsuario){
	include_once 'conexao.php';
	$dados_rc = filter_input_array(INPUT_POST, FILTER_DEFAULT);
	
	$erro = false;
	
	$dados_st = array_map('strip_tags', $dados_rc);
	$dados = array_map('trim', $dados_st);
	
	if(in_array('',$dados)){
		$erro = true;
		$_SESSION['msg'] = "Necessário preencher todos os campos";
	}elseif((strlen($dados['senha'])) < 6){
		$erro = true;
		$_SESSION['msg'] = "A senha deve ter no minímo 6 caracteres";
	}elseif(stristr($dados['senha'], "'")) {
		$erro = true;
		$_SESSION['msg'] = "Caracter ( ' ) utilizado na senha é inválido";
	}else{
		$result_usuario = "SELECT id_cliente FROM clientes WHERE login='". $dados['login'] ."'";
		$resultado_usuario = mysqli_query($conn, $result_usuario);
		if(($resultado_usuario) AND ($resultado_usuario->num_rows != 0)){
			$erro = true;
			$_SESSION['msg'] = "Este login já está sendo utilizado";
		}
		
		$result_usuario = "SELECT id_cliente FROM clientes WHERE email='". $dados['email'] ."'";
		$resultado_usuario = mysqli_query($conn, $result_usuario);
		if(($resultado_usuario) AND ($resultado_usuario->num_rows != 0)){
			$erro = true;
			$_SESSION['msg'] = "Este e-mail já está cadastrado";
		}
	}
	
	
	//var_dump($dados);
	if(!$erro){
		//var_dump($dados);
		
		$dados['senha'] = sha1($dados['senha']);
		
		$result_usuario = "INSERT INTO clientes (nome, email, login, senha) VALUES (
						'" .$dados['nome']. "',
						'" .$dados['email']. "',
						'" .$dados['login']. "',
						'" .$dados['senha']. "'
						)";
		$resultado_usario = mysqli_query($conn, $result_usuario);
		if(mysqli_insert_id($conn)){
			$_SESSION['msgcad'] = "cliente cadastrada com sucesso";
			header("Location: principal.php");
		}else{
			$_SESSION['msg'] = "Erro ao cadastrar o usuário";
		}
	}
	
}
?>
<!DOCTYPE html>
<html lang="pt-br">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Cadastro de clientes</title>
		<link href="bootstrap/bootstrap.min.css" rel="stylesheet">
        <script src="bootstrap/bootstrap.min.js"></script>
	</head>
	<body>
	
	
		<div class="container"> 
				<h2>Cadastrar Usuário</h2>
				<?php
					if(isset($_SESSION['msg'])){
						echo $_SESSION['msg'];
						unset($_SESSION['msg']);
					}
				?>
<form method="POST" action="">
		
					
<input type="text" name="nome" id="nome" class="form-control"><br>
					                            
<input type="email" name="email" class="form-control"><br><br>
									                             
<input type="text" name="login" class="form-control"><br><br>
					                  
<input type="password" name="senha" id="senha" class="form-control"><br
					
<center><input type="submit" name="btnCadUsuario" value="Cadastrar" class="btn btn-success" ></center><br><br>
					
	   </form>
	</div>
</div>	
	</body>
</html>

Omar~ · Agosto 16, 2020

Você pode está fazendo a consulta no carregamento da página, então pegar todos índices de e-mail cadastrados por exemplo codificar em JSON e criar um array no javascript com esses índices, então ao submeter o form o valor do input será comparado com cada valor do array. Se existir o script retorna falso não submetendo o form.

Exemplo:

Spoiler


<?php
$resultado_do_banco = [
    ['mail' => 'aaa@aaa.com'],
    ['mail' => 'bbb@bbb.com'],
    ['mail' => 'ccc@ccc.com']
];
$json = json_encode($resultado_do_banco);
?>

<div id="resultado"></div>
<form method="POST" action="" onsubmit="return salvarForm();">
    <input
        type="text"
        name="mail"
        id="identificador"
        placeholder="Digite um endereço de e-mail"
        pattern="([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{3})"
        required=""
    />

    <button>Submeter formulário</button>
</form>

<script>
    var arr = JSON.parse('<?= $json ?>');
    var resultado = document.getElementById('resultado');
    var input = document.getElementById('identificador');

    function salvarForm() {
        var valor = (window.input).value.trim();
        var retorno = null;
        if (!valor) {
            resultado.innerText = 'Digite o e-mail';
            retorno = true;
        } else {
            window.arr.forEach(function (e) {
                if (e.mail == valor) {
                    resultado.innerText = 'O endereço de e-mail "' + valor + '" existe no array';
                    retorno = true;
                }
            });
        }
        
        if (retorno) {
            return (false);
        }
    }
</script>

Porém também deverá fazer essa verificação por back-end também pós submetido, porque qualquer um pode acessar o javascript e apagar ou editar o array de dados.

Uma alternativa também é submeter o form por ajax, então você faz a comparação do valor com o resultado do banco sem redirecionar a página.

Veja isso:

https://github.com/Spell-Master/sm-web/tree/master/javascript/AjaxRequest

Enfim, independente você sempre terá que comparar os valores antes de registrar novos dados no banco.

Camilavip · Agosto 16, 2020

14 horas atrás, Omar~ disse:

Você pode está fazendo a consulta no carregamento da página, então pegar todos índices de e-mail cadastrados por exemplo codificar em JSON e criar um array no javascript com esses índices, então ao submeter o form o valor do input será comparado com cada valor do array. Se existir o script retorna falso não submetendo o form.

Exemplo:

Mostrar conteúdo oculto



<?php
$resultado_do_banco = [
    ['mail' => 'aaa@aaa.com'],
    ['mail' => 'bbb@bbb.com'],
    ['mail' => 'ccc@ccc.com']
];
$json = json_encode($resultado_do_banco);
?>

<div id="resultado"></div>
<form method="POST" action="" onsubmit="return salvarForm();">
    <input
        type="text"
        name="mail"
        id="identificador"
        placeholder="Digite um endereço de e-mail"
        pattern="([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{3})"
        required=""
    />

    <button>Submeter formulário</button>
</form>

<script>
    var arr = JSON.parse('<?= $json ?>');
    var resultado = document.getElementById('resultado');
    var input = document.getElementById('identificador');

    function salvarForm() {
        var valor = (window.input).value.trim();
        var retorno = null;
        if (!valor) {
            resultado.innerText = 'Digite o e-mail';
            retorno = true;
        } else {
            window.arr.forEach(function (e) {
                if (e.mail == valor) {
                    resultado.innerText = 'O endereço de e-mail "' + valor + '" existe no array';
                    retorno = true;
                }
            });
        }
        
        if (retorno) {
            return (false);
        }
    }
</script>

Porém também deverá fazer essa verificação por back-end também pós submetido, porque qualquer um pode acessar o javascript e apagar ou editar o array de dados.

Uma alternativa também é submeter o form por ajax, então você faz a comparação do valor com o resultado do banco sem redirecionar a página.

Veja isso:

https://github.com/Spell-Master/sm-web/tree/master/javascript/AjaxRequest

Enfim, independente você sempre terá que comparar os valores antes de registrar novos dados no banco.

Vou ver Omar, eu tenho outra forma de verificar se existe sem refresh, porém ele só verifica e não impede o cadastro, a forma que está impede o cadastro se houver um login ou email parecido, mas se tiver outros dados como endereço e outras coisas, no fim se ele verifica e ve que tem um login e email iguais ele faz o refresh e avisa, porém apaga todos os campos preenchidos. Tendo de refazer o cadastro novamente

Entrar

Fazer verificação de um formulário sem refresh

Recommended Posts

Camilavip 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

Camilavip 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Javascript - Calcular Valores Monetário em Tempo Real

JavaScript - Exibir logo dentro da Tabela html

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante