2

Desculpa se a pergunta for boba, mais não conheço muito de ajax e estou tentando fazer um formulário básico para testar a validação usando ajax e php(se é que é possível). Bom lendo na internet e vendo alguns artigos, até agora cheguei com o código abaixo, mas não está funcionando. Quero que quando a pessoa estiver digitando ou quando enviar o formulário ele faça a validação no php e se caso tenha algum erro ele retorna usando ajax o erro.

*O arquivo ini.php esta minha conexão com o banco de dados, não fiz nenhuma query porque, primeiro gostaria de testar os erros para depois enviar o dado para o banco de dados. E não coloquei outros input pra não complicar, resolvendo um o resto eu me viro.

Obrigado.

HTML:

  <table>
    <tr>
      <td><input type="text" name="nome" placeholder="Nome" maxlength="20" onBlur="Validate(this.value)"></td>
       <span id="error"><?php echo $error; ?></span>
    </tr>  
  </table>

"Ajax":

    function Validate(data){

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState === 4 && xmlhttp.status === 200){
            document.getElementById('error').innerHTML = xmlhttp.responseText;  
        }   
    };
    xmlhttp.open("GET", "register.php?q=" + data, true);
    xmlhttp.send();

    }

PHP:

$error = array(
    "Nome é obrigatório.",
    "Somente 20 caracteres são permitidos.",
    "Somente letras e espaços são permitidas."
);

// Get the q parameter from url
$q = $_REQUEST["q"];

if($_SERVER["REQUEST_METHOD"] === "POST"){
    if(empty($q)){
        echo $error[0]; 
    } else if(!preg_match("/^[a-zA-Z]*$/", $q)){
        echo $error[2];
    } else if(strlen($q) > 20){
        echo $error[1];
    }
}

?>
6
  • Pode usar JQuery ou JS Puro ? Commented 28/07/2016 às 13:18
  • Sim,mais eu sei validar usando Jquery ou JS, gostaria mesmo de validar, usando Ajax, obrigado Commented 28/07/2016 às 13:31
  • Você não vai validar usando ajax, ou valida no lado cliente (javascript), ou no lado servidor (php, recomendado)
    – Miguel
    Commented 28/07/2016 às 13:32
  • Dê uma olhadela nesta minha resposta aqui: pt.stackoverflow.com/questions/142834/… . Aí eu valido do lado servidor
    – Miguel
    Commented 28/07/2016 às 13:34
  • Obrigado pela dica Commented 28/07/2016 às 14:17

1 Resposta 1

1

Você sempre deve validar no servidor, por questões de segurança (Minha opinião). No caso o Ajax, é mais para a página não precisar recarregar ao dar um retorno para o usuário.

Seguindo seu exemplo fiz um aqui, para vc poder adaptar.

Note que eu retirei o maxlength="20", pois dessa forma ele não permite o usuário adicionar mais do que 20 caracteres(isso para poder usar a validação no back-end). No seu caso data não estava recebendo o valor do input, por isso adicionei:

var data = document.getElementById("data_id").value;

E adicionei esse valor através de um id no input, poderia ser de outra forma.

 <table>
    <tr>
    <form method="GET" action="register.php">   
      <td><input type="text" name="data_input" id="data_id" placeholder="Nome" ></td>
      <td><input type="submit" value="submit"  name="submit" onclick="Validate();return false;"></td>
       <span id="error"></span>
    </form>
    </tr>  
  </table>
  <script>
    function Validate(){
    var data = document.getElementById("data_id").value;
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", "register.php?data_input=" + data, true);
    xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState === 4 && xmlhttp.status === 200){
           if(xmlhttp.responseText != "ok!"){
                document.getElementById("data_id").value='';
                document.getElementById("data_id").placeholder = xmlhttp.responseText;
                document.getElementById("data_id").focus();
            }

        } 

    };
    xmlhttp.send();


    }
  </script>

register.php

if (isset($_GET["data_input"])) {
    $data = $_GET["data_input"];
    if(empty($data)){
      echo "Nome é obrigatório."; 
    } else if(!preg_match("/^[a-zA-Z]*$/", $data)){
      echo "Somente letras e espaços são permitidas.";
    } else if(strlen($data) > 20){
      echo "Somente 20 caracteres são permitidos.";
    }else{
      echo "ok!";
    }
}

Espero ter ajudado, quaquer coisa comenta que agente ajusta.

2
  • Obrigado ajudou muito! Commented 28/07/2016 às 16:46
  • Apesar que nesse caso estou usando o método GET, o que não é recomendado para dados sensíveis.
    – MagicHat
    Commented 28/07/2016 às 17:47

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 .