[Résolu] Requête Ajax

Bonjour,

Je souhaite vérifier qu'une donnée n'existe pas pour un champ de formulaire avant de le valider en utilisant Jquery Validator avec Ajax mais je n'arrive pas à récupérer ma valeur ( .done(function(response) en JS

Merci pour votre aide

Mon fichier de formulaire

<?php 

include("formula.php");

include("core/Views/templates/default.php");

?>

<div id="test">

<div class="container container-center margin">

    <div class="card card-default card-body text-center">
        <div class="col-sm-6 offset-sm-3 text-center <!--was-validated-->">
           <form class="form justify-content-center" method="post" id="plant_Add_Form" name="plant_Add_Form" >
                <fieldset>
                    <legend >Ajout Plante</legend> 
                
                    <div class="form-group row">
                        <label for="reference" class="col-sm-4 col-form-label ">Reference</label>
                        <input class="col-sm-7 col-form-label " type="text" name="reference" id="reference"  >
                    </div>
                                        
                    <button class="btn btn-primary" id="add" name="add">Ajouter</button>
                
                    <button  type="reset" class="btn btn-primary reset" id="reset" name="reset"  >Effacer</button>   

                </fieldset> 	
            </form> 
        </div>    
   </div>     
</div>

Mon JS

$.validator.addMethod("REFERENCE_NOT_DUPLICATE", function (value, element) {
return this.optional(element) || validate_reference_not_duplicate( );
},
"Référence déjà utilisée."
);

function validate_reference_not_duplicate() {

        var reference_value = $('#reference').val();

        var result
    
        $.ajax({
            url: "formula.php", // script to validate in server side
            type:"POST",
            data: {reference: reference_value}//LES DONNEES QUE L'ON ENVOIE AU FORMULAIRE
         })

        .done(function(response) {
           /console.log (response);
            result = (response !== true) ? true : false;
           
                    
       })
 
        .fail(function(jqXHR, textStatus, errorThrown) {

            if(jqXHR.status == 400)
                {
                alert("Erreur 400");   
                }
            else
                {
                alert (jqXHR, textStatus,errorThrown)
                }    
       
        })

        .always(function() {

        });//FIN AJAX 

        return result; 
    }

  $('#plant_Add_Form').validate({

        rules: {
            reference: {
                required: true,
                REFERENCE_NOT_DUPLICATE: true
            }
        },
        messages: {
            
            reference: {
                required: "Entrez la référence.",
                REFERENCE_NOT_DUPLICATE: "Existe déjà",
                }
        },

            
        submitHandler: function(form) {
            form.submit();
        }
    });  

</script>

Mon fichier formula.php

<?php

if(isset($_POST['reference']))
{
require_once("connexion/connexion.php");

mysqli_select_db($db, $dbname);

$reference = $_POST['reference'];

$query = "SELECT reference FROM plants WHERE reference = '$reference'";

$query_retrived = mysqli_query($db, $query) or die ("Error:".mysqli_error($db));
$rows = mysqli_fetch_assoc($query_retrived);
$result = mysqli_num_rows($query_retrived);


if ($result>0)
{
return true;
}
else
{
return false;
}

mysqli_free_result($query_retrived);
}
Modifié par dudu22 (28 Nov 2023 - 13:09)

Salut Je pense qu'il faudrait que tu te rapproche des concepts des promesses javascript.

L'appel AJAX est comme son nom l'indique Asynchrone. Ce qui signifie que le code continue son exécution pendant que la requête AJAX est en cours.

Cela signifie que lorsque validate_reference_not_duplicate retourne result, la requête Ajax n'a pas encore été complétée, donc result reste indéfini.
C'est peut être une solution que d'utiliser les promesses pour gérer la logique asyncrhone.


exemple :

$.validator.addMethod("REFERENCE_NOT_DUPLICATE", function (value, element) {
    var deferred = $.Deferred();

    validate_reference_not_duplicate(value)
        .done(function (response) {
            deferred.resolve(response !== true);
        })
        .fail(function (jqXHR, textStatus, errorThrown) {
            deferred.reject("Erreur de validation: " + textStatus);
        });

    return deferred.promise();
}, "Référence déjà utilisée.");

function validate_reference_not_duplicate(reference_value) {
    return $.ajax({
        url: "formula.php",
        type: "POST",
        data: { reference: reference_value }
    });
}

Concernant l'ajout de Deferred, voici une explication piqué sur le net :

L'objet Deferred est une promesse qui peut être dans l'un des trois états principaux : "pending" (en attente), "resolved" (résolu), ou "rejected" (rejeté). Cet objet est utilisé pour représenter le résultat d'une opération asynchrone qui peut être résolue avec succès (resolved) ou échouer (rejected).

Dans le contexte de la validation asynchrone, une Deferred est souvent utilisée pour gérer la logique asynchrone d'une manière qui rend le code plus lisible et maintenable.
Modifié par JENCAL (28 Nov 2023 - 14:59)

Merci beaucoup pour ton aide mais cela ne marche pas, j'espère que je n'ai pas d'erreurs autre part

La requête sur reference marche

mais j'ai un problème sur formula.php qui ne fonctionne pas ?

Pourtant elle récupère bien la valeur mais ne renvoie rien ?
Modifié par dudu22 (28 Nov 2023 - 18:34)

Hello,

Si ta requête Ajax ne retourne rien, c'est normal : tu dois en fait print le contenu de cette réponse dans le corps de la réponse HTTP renvoyée. Sinon, cette réponse sera effectivement vide. Il vaudrait alors mieux utiliser la fonction echo plutôt que return dans ton script PHP.

Par exemple :

// ...

if ($result>0) {
    $response = ['success' => true];
}
else {
    $response = ['success' => false];
}

header('Content-Type: application/json; charset=utf-8');
echo json_encode($response); // EDIT : Il y avait une erreur ici, $data au lieu de $response

Le header est optionnel, tu n'es pas obligé de retourner une réponse au format Json mais c'est plus pratique et conventionnel.
Modifié par Loraga (30 Nov 2023 - 20:20)

Super merci beaucoup, ma requête marche dans formula.php


Mais je n'ai pas de message quand la valeur existe déjà au niveau du

$('#plant_Add_Form').validate({

        rules: {
            reference: {
                required: true,
                REFERENCE_NOT_DUPLICATE: true
            }
        },
        messages: {
            
            reference: {
                required: "Entrez la référence.",
                REFERENCE_NOT_DUPLICATE: "Existe déjà",
                }
        },

Je m'interroge sur l'écriture :

deferred.resolve(response !== true);

Je me serai attendu à :
deferred.resolve(response.success); pour avoir true ou false

return deferred.promise(); n'a l'air de rien retourner alors qu'il devrait je pense retourner false ou true
Modifié par dudu22 (29 Nov 2023 - 11:09)

Merci j'ai corrigé.

Par contre j'ai un petit souci :

Pour empêcher la validation par PHP j'ai mis e.preventdefault au début de la validation donc j'ai bien mes vérifications JS
Le problème c'est que je ne sais pas ressortir du e.preventdefault quand le champ est correct pour passer à la validation php

Comment pourrais je faire ?

Finalement je n'ai fait le contrôle en utilisant onchange