Validation of form php and ajax

Question

Validation of form php and ajax

Navigation

#1 by (1 votes)

2

I'm sorry if the question is silly, but I do not know much about ajax and I'm trying to make a basic form to test validation using ajax and php (if at all possible). Good reading on the internet and seeing some articles, so far I have come with the code below, but it is not working. I want when the person is typing or when submitting the form he does the validation in php and if in case he has any error he returns using the ajax error.

* The ini.php file is my connection to the database, I did not do any query because first I would like to test the errors and then send the data to the database. And I did not put other input to complicate, solving one the rest I turn.

Thank you.

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];
    }
}

?>

php ajax input

asked by anonymous 28.07.2016 / 15:09

1 answer

Javascript formatting problems with currency Set FROM different from the email you are actually sending. It's safe?

score 1 · Accepted Answer

You should always validate on the server, for security reasons (My opinion). In the case of Ajax, it is more for the page not needing to reload when giving a return to the user.

Following your example I made one here, so you can adapt.

Note that I removed the maxlength="20" because it does not allow the user to add more than 20 characters (this is so that he can use the validation in the backend). In your case data was not getting the value of input , so I added:

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

And I added this value through a id in the input, it could be otherwise.

 <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!";
    }
}

I hope to have helped, anything says agent adjusts.