Multiple input fields Validation with AJAX / PHP on Mysql

Question

i've created a form with several fields, input, select, box etc. i've 2 fields that must be validated agaist DB. If exists show some details if not display some aditional input fields to add to DB.

Ex: Make, model, licenseplate. IF licenseplate exists -> Honda Accord IF NOT -> input to add .

$(document).ready(function(){
  $("licplate").change(function(){
    var lp = $("licplate").val();
if(lp.length <= 8) { //my country have a 8 digit plate
$("#stat").html('<image> Verifing');
$.ajax({
type: "POST",
url: "check.php",
data: "licplate="+lp,
success: function(msg) {
$("#stat"),ajaxComplete(function(event,request,settings){
 if(msg=='OK'){
   $(this).html('message to ignore');
} else { 
$(this).html(msg); 
}

In my check.php i connect to db, validate and return data. If exist return

echo "<span class="msg">$row_sql_chk['make']." - ".$row_sql_chk['model']</span>";

if not

<li><label>Make</label><input id="make" name="make" type="text" />
<li><label>Modele</label><input id="model" name="model" type="text" />

It work just fine, however i've got a new validation to make in another input field on form. I must validate the driver the same way.. is exits the "driverlicense" show name and address if not include fields to insert it. I did the same code, change fieldnames, the div name etc.. And work just fine.

But then came the problem... if both of the fields dont exist. I fill the fields (make, model) and when validating the driver, if not exist it clears the top fields. After that if i fill (again) all the fields (make, model, name..) works just as expected. So how can i do the 2nd field validation without cleaning the other? tks

Answer 1

solved

Add a validation to field to licplate 'undefined'

if(msg != 'ERR'){ 
     $("#licplate").removeClass('object_error'); 
     $("#licplate").addClass("object_ok");
     var lic = $("#matricula"),val(); // assing the value of 'new' input
     if(typeof lic === 'undefined') { // verify the value of 'new' input 
        $(this).html(msg);
     }
  }  

and it works!!

you guys are awesome... did not answer so I can use my best tool .. my brain !! :D

Answer 2

File checkcom.php (the file check.com is almost equal, the diference is in the table to test.)

<?php
if(isset($_POST['comand']))
{
    $comand = $_POST['comand'];

    $dbHost = 'localhost';
    $dbUsername = 'name';
    $dbPassword = 'XXXXXXX';
    $dbDatabase = 'MYDB';

    $db = mysql_connect($dbHost, $dbUsername, $dbPassword) or die ("Unable to connect to Database Server.");
    mysql_select_db ($dbDatabase, $db) or die ("Could not select database.");
    $sql_check = mysql_query("select nome, licenca,  from pilotos where licenca='".$comand."'") or die(mysql_error());
// in check.com is "select matricula, marca ,modelo from veiculos where matricula='".$mat."'") or die(mysql_error());

    $row_sql_check = mysql_fetch_assoc($sql_check);
    $totalRows_sql_check = mysql_num_rows($row_sql_check);
    if(mysql_num_rows($sql_check))
        {
            echo '<font color="#003366"> <STRONG>'.$row_sql_check['nome'].'</STRONG> </font>';

        }
    else
        {
        echo '<div class="rectang">
            <li><label>Nome:</label> <input id="nome_pil" name="nome_pil" type="text" title="Nome Piloto" required/></li>
        <li><label>Morada:</label> <input id="morada_pil" name="morada_pil" type="text" title="Morada Piloto"/><br /></li>
        <li><label>Localidade:</label> <input id="local_pil" name="local_pil" type="text" title="Localidade Piloto"/><br /></li>

            <font color="#003366"> A licen&ccedil;a <STRONG>'.$comand.'</STRONG> N&Atilde;O est&aacute; registada na tabela. Vai ser adicionado o registo provis&oacute;rio.</font>
            </div>';
        }
}

?>

---- SCript ----

<SCRIPT type="text/javascript">
pic1 = new Image(16, 16); 
pic1.src = "images/loader.gif";
$(document).ready(function(){
        $("#licplate").change(function(){ 
                var lp = $("#licplate").val();
                if(lp.length >= 4)  {
                        $("#status").html('<img src="images/loader.gif" align="absmiddle">&nbsp;A verificar...');
                        $.ajax({  
                        type: "POST",  
                        url: "check.php",  
                        data: "licplate="+ lp,  
                        success: function(msg){  
                           $("#status").ajaxComplete(function(event, request, settings){ 
                            if(msg == 'OK'){ 
                                    $("#licplate").removeClass('object_error'); 
                                    $("#licplate").addClass("object_ok");
                                    $(this).html('Não existe&nbsp;<img src="images/alerta.gif" align="absmiddle">');
                                }  
                            else {  
                                    $("#licplate").removeClass('object_ok'); 
                                    $("#licplate").addClass("object_error");
                                    $(this).html(msg);
                            }  
                            });
                     } 
                    }); 
                }
                else{
                    $("#status").html('<font color="red">A matr&iacute;cula tem de ter pelo menos <strong>4</strong> caracteres.</font>');
                    $("#licplate").removeClass('object_ok'); 
                    $("#licplate").addClass("object_error");
                    }

            });

<!--  -- aqui muda para a licença de condutor

        $("#comand").change(function(){ 
                var cmd = $("#comand").val();
                if(cmd.length >= 6){
                    $("#status1").html('<img src="images/loader.gif" align="absmiddle">&nbsp;A verificar...');
                    $.ajax({  
                    type: "POST",  
                    url: "checkcom.php",  
                    data: "comand="+ cmd,  
                    success: function(msg1){  
                       $("#status1").ajaxComplete(function(event, request, settings){ 
                        if(msg1 == 'OK'){ 
                                $("#comand").removeClass('object_error1'); 
                                $("#comand").addClass("object_ok1");
                                $(this).html('Não existe&nbsp;<img src="images/alerta.gif" align="absmiddle">');
                            }  
                        else  
                            {  
                                $("#comand").removeClass('object_ok1'); 
                                $("#comand").addClass("object_error1");
                                $(this).html(msg1);
                        }  
                        });
                     } 
                    }); 
                }
                else
                    {
                    $("#status1").html('<font color="red">A Licença de piloto tem de ter pelo menos <strong>6</strong> caracteres.</font>');
                    $("#comand").removeClass('object_ok1'); 
                    $("#comand").addClass("object_error1");
                    }

            });


});

//-->
function tratamat(mat)
{
    var tipo = mat.substr(3, 1);
    switch(tipo) {
        case "U":
            document.getElementById("tipo_veic").value="DP";
            break;
        case "u":
            document.getElementById("tipo_veic").value="DP";
            break;
        case "H":
            document.getElementById("tipo_veic").value="GT";
            break;
        case "h":
            document.getElementById("tipo_veic").value="GT";
            break;
        case "A":
            document.getElementById("tipo_veic").value="SR";
            break;
        case "a":
            document.getElementById("tipo_veic").value="SR";
            break;

    }
}

</SCRIPT>

And the HTML form

<form action="<?php echo $editFormAction; ?>" method="POST" name="entrada" class="formgeral" id="formgeral">
<ul>
<li><label>Matricula</label><input id="licplate" size="20" type="text" name="licplate" title="Matricula" style="text-transform:uppercase;" onBlur="javascript:tratamat(this.value)"><br>
<div id="status"> </div></li>
<li>

<label>Tipo Veiculo</label><input type="text" name="tipo_veic" id="tipo_veic" title="Tipo de Aeronave" style="text-transform:uppercase;">
</li>
(...)
      <li><label>Licença</label><input  id="comand" name="comand" type="text" size="15" maxlength="15"><div id="status1"> </div></li>

(...)

Is this enough?