Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

luanda

Exibir se dado já existe dentro do formulário

Recommended Posts

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");
    }
?>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não seria mais fácil, rápido, pratico simples, eficiente ... bla bla bla.

Só usar os recursos nativos do browser?

Ou seja no caso só usar o HTML e javascript.

 

Criei um exemplo aqui para o telefone, mas somente aceita telefones válidos do brasil, fmz?!

 

Spoiler

<style>
.input_valido:invalid:not(:placeholder-shown) {
	color:#f55555 !important;
	box-shadow: 0 0
}
.input_valido:valid:focus:not(:placeholder-shown){
	color:#2f7a00!important
}
</style>

<script>
function mascara(a, b) {
    c = a;
    d = b;
    setTimeout('obj()', 1);
}
function obj() {
    c.value = d(c.value);
}
function telefone(e) {
    e = e.replace(/\D/g, '');
    e = e.replace(/^(\d{2})(\d)/g, '($1) $2');
    e = e.replace(/(\d)(\d{4})$/, '$1-$2');
    return e;
}
</script>

<input type="text" class="input_valido"
maxlength="15"
placeholder="Telefone Aqui"
onkeypress="mascara(this, telefone)" onblur="clearTimeout()"
pattern="\([1-9]{2}\) [2-9][0-9]{3,4}-[0-9]{4}"
required />

 

 

Na verdade só o pattern já é o suficiente, pois ele passa uma expressão regular para somente aceitar um telefone válido, então enquanto não digitar o telefone corretamente o input é considerado inválido.

O javascript é só para dar um help para escrever o numero com formatação "certinha"

 

Não deixe de fazer a verificação desses campo quando submeter dos dados, lembre-se que qualquer pessoa pode abrir o inspetor e modificar a estrutura do jeito que quiser

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por violin101
      Caros amigos do grupo, saudações e um feliz 2025.
       
      Estou com uma pequena dúvida referente a Teclas de Atalho.

      Quando o Caps Lock está ativado o Comando da Tecla de Atalho não funciona.
      ou seja:
      se estiver para letra minúscula ====> funciona
      se estiver para letra maiúscula ====> não funciona
       
      Como consigo evitar essa falha, tanto para Letra Maiúscula quanto Minúscula ?

      o Código está assim:
      document.addEventListener( 'keydown', evt => { if (!evt.ctrlKey || evt.key !== 'r' ) return;// Não é Ctrl+r, portanto interrompemos o script evt.preventDefault(); });  
      Grato,
       
      Cesar
    • Por violin101
      Caros amigos, saudações.
       
      Por favor, poderiam me ajudar.

      Estou com a seguinte dúvida:
      --> como faço para para implementar o input código do produto, para quando o usuário digitar o ID o sistema espera de 1s a 2s, sem ter que pressionar a tecla ENTER.

      exemplo:
      código   ----   descrição
           1       -----   produto_A
       
      Grato,
       
      Cesar
    • Por violin101
      Caros amigos, saudações.
       
      Humildemente peço desculpa por postar uma dúvida que tenho.

      Preciso salvar no MySql, os seguinte Registro:

      1 - Principal
      ====> minha dúvida começa aqui
      ==========> como faço para o Sistema Contar Automaticamente o que estiver despois do 1.____?
      1.01 - Matriz
      1.01.0001 - Estoque
      1.01.0002 - Oficina
      etc

      2 - Secundário
      2.01 - Loja_1
      2.01.0001 - Caixa
      2.01.0002 - Recepção
      etc
       
      Resumindo seria como se fosse um Cadastro de PLANO de CONTAS CONTÁBEIL.

      Grato,


      Cesar









       
    • Por violin101
      Caros amigos, saudações.

      Por favor, me perdoa em recorrer a orientação dos amigos.

      Preciso fazer um Relatório onde o usuário pode Gerar uma Lista com prazo para vencimento de: 15 / 20/ 30 dias da data atual.

      Tem como montar uma SQL para o sistema fazer uma busca no MySql por período ou dias próximo ao vencimento ?

      Tentei fazer assim, mas o SQL me traz tudo:
      $query = "SELECT faturamento.*, DATE_ADD(faturamento.dataVencimento, INTERVAL 30 DAY), fornecedor.* FROM faturamento INNER JOIN fornecedor ON fornecedor.idfornecedor = faturamento.id_fornecedor WHERE faturamento.statusFatur = 1 ORDER BY faturamento.idFaturamento $ordenar ";  
      Grato,
       
      Cesar
       
       
       
       
    • Por violin101
      Caros amigos, saudações
       
      Por favor, me perdoa em recorrer a orientação dos amigos, tenho uma dúvida.
       
      Gostaria de uma rotina onde o Sistema possa acusar para o usuário antes dos 30 dias, grifar na Tabela o aviso de vencimento próximo, por exemplo:
       
      Data Atual: 15/11/2024
                                           Vencimento
      Fornecedor.....................Data.....................Valor
      Fornecedor_1...........01/12/2024..........R$ 120,00 <== grifar a linha de Laranja
      Fornecedor_1...........01/01/2025..........R$ 130,00
      Fornecedor_2...........15/12/2024..........R$ 200,00 <== grifar a linha de Amarelo
      Fornecedor_2...........15/01/2025..........R$ 230,00
      Fornecedor_3...........20/12/2024..........R$ 150,00
       
      Alguém tem alguma dica ou leitura sobre este assunto ?

      Grato,
       
      Cesar
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.