[Résolu] Données en double

Bonsoir,

J'ai un formulaire avec des champs en required et un champ où je dois voir si il n'y a pas de doublon.
Quand c'est le cas je bloque bien mais quand tout est bon je n'arrive pas à soumettre mon formulaire

Mon formulaire

<form class="form justify-content-center" method="post" id="plant_Add_Form" name="plant_Add_Form" action ="/fr/BO/Plants/add">
                <!--<div id="res"></div>-->
                <fieldset>
                    <legend >Ajout Plante</legend> 
                    <div class="form-group row">
                        <label for="name" class="col-sm-4 col-form-label">Nom</label>
                        <input class="col-sm-8 col-form-label " type="text" name="name" id="name" minlength="3" required autofocus>
                    </div>
                    <div class="form-group row">
                        <label for="commonname" class="col-sm-4 col-form-label">Nom Commun</label>
                        <input class="col-sm-7 col-form-label" type="text" name="commonname" id="commonname"  >
                    </div>
                    <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"  placeholder ="Format plant_xxx" pattern="^plant_[0-9]{3}$" required>
                    <span id="referenceAvailabilityMessage" class="error-message"></span>
                    </div>
                    <div class="form-group row">
                        <label for="family" class="col-sm-4 col-form-label">Famille</label>
                        <select class="col-sm-5 " name="plantfamilie_id" id="plantfamilie_id" required>
                            <option value=""></option>
<button class="btn btn-primary" type="submit" id="add" name="add">Ajouter</button>
                     <button  type="reset" class="btn btn-primary reset" id="reset" name="reset"  >Effacer</button>   
                </fieldset> 	
            </form> 

Mon code jquery

var isValid = true;

           /* // Validation des champs requis
            $("[required]").each(function () {
                if (!$(this).val()) {
                    isValid = false;
                    $(this).addClass("is-invalid");
                } else {
                    $(this).removeClass("is-invalid");
                }
            });

            if (!isValid) {
                return;
            }*/

            // Validation AJAX pour le champ reference uniquement
            $.ajax({
                type: "POST",
                url: "/fr/BO/Plants/checkReference",
                data: {
                    reference: $("#reference").val()
                },
                success: function (response) { console.log(response);
                    if (response === "false") {
                        //alert ("Existe déjà");
                        $("#referenceAvailabilityMessage").html("Cette référence existe déjà.").show();
                        //$("#reference").addClass("is-invalid");
                        
                    } else {
                        // Continuez avec la soumission du formulaire si tout est valide
                       $("#plant_Add_Form").submit();
                    }
                },
                error: function (xhr, status, error) {
                    console.error("Erreur AJAX:", status, error);
                }
            });

            //e.preventDefault(); //empêcher une action par défaut

        });


    });
</script>

Merci d'avance pour votre aide

Bonjour,

1) Y a-t-il ailleurs dans ton code ce qu'il faut pour déclencher ce code ajax lorsque l'utilisateur clique sur le bouton "Ajouter". En l'état, je ne vois rien de tel dans ton code.

2) Sans cette étape de vérification, est-ce que lorsque l'utilisateur clique sur le bouton "ajouter",  la requête s'effectue sans erreur côté serveur, ou bien est-ce que cette partie de code n'est pas encore au point ?

Amicalement,