11486 sujets

JavaScript, DOM et API Web HTML5

Comment valider le formulaire avant d'exécuter la commande POST ?

Bonjour,
J'ai un formulaire dans lequel je voudrais bloquer le POST si les input ne sont pas validées par bootstrap, comment faire ?

    <body>
    
      <form method="post" action="createProduct.php" role="form" id="form">
    	  <hr/>
    		<input class="form-control" id="name_product" name="name_product" type="text" placeholder="name product" required>
    	  <hr/>
    	  <input class="form-control" id="description_product" name="description_product" type="text" placeholder="Description product" required>
    	  <hr/>
    	  <input class="form-control" id="number_product" type="number" name="number_product" placeholder="Number of product" required>
    	  <hr/>
    	  <input class="form-control" id="brand_name"type="text" name="brand_name" placeholder="Brand name" required>
    	  <hr/>
    	  <input class="form-control" id="brand_description" type="text" name="brand_description" placeholder="Brand description" required>
    	  <hr/>
    		<button class="btn btn-lg btn-primary btn-block" id="create_product" type="submit">Create product</button>
    	</form>
    	<div id="resultat"></div>
    </body>



    <script type="text/javascript">
        $(document).ready(function() {
            $("#create_product").click(function(e) {
                e.preventDefault();
    						$.post(
                    'createProduct.php',
                    {
                        name_product: $("#name_product").val(),
                        description_product: $("#description_product").val(),
    										number_product: $("#number_product").val(),
    										brand_name: $("#brand_name").val(),
    										brand_description: $("#brand_description").val(),
                    },
    
                    function(data) {
                        if (data == 'Success') {
                            alert("OK");
                        } else {
                            $("#resultat").html('Problem !');
                        }
    
                    },
                    'text'
                );
            });
        });
    </script>
Une première possibilité est de ne pas mettre de bouton submit mais un simple bouton qui déclenche le code. Ce dernier effectue les tests et lance la méthode .submit() sur le formulaire si tout est ok.
Salut,

qu'est ce que tu entends par "validées par bootstrap" ? (Je ne vois pas bien ce que bootstrap vient faire la Smiley sweatdrop )

A partir du moment ou tu as mis l'attribut required sur les champs requis, le formulaire ne sera envoyer(/"envoyable"?) que si ils sont remplis.

Du coup je me demande à quoi te sert le javascript ?

(Et ce n'est pas parce que tu as fais une vérification du coté client qu'il ne faut pas aussi la faire du coté serveur Smiley cligne )
Modérateur
Bonjour,

a écrit :
Une première possibilité est de ne pas mettre de bouton submit mais un simple bouton qui déclenche le code. Ce dernier effectue les tests et lance la méthode .submit() sur le formulaire si tout est ok.

Mauvaise idée,

la vraie solution est de réagir à l'event submit du form, qui attrape le click du bouton et le enter:


$('#myform').submit(function (e) {
    if (!validateForm()) {
        e.preventDefault();
    }
});
Meilleure solution
Sujet clos
Aller à