Valider mon formulaire avec Jquery

Je ne parviens pas à essayer de comprendre comment valider un formulaire que je soumets avec la fonction post de jquery.

Tout ce que je veux faire est de ne soumettre le formulaire que si le champ ‘facture_cost’ a été rempli. Le formulaire fonctionne sans le code de validation. J’essaie d’utiliser le plugin de validation de formulaire en direct JQuery, mais pour une raison quelconque, il ne fonctionne pas. S’il vous plaît quelqu’un peut-il me dire ce qui ne va pas / où je devrais placer le code de validation? Merci.

La forme

Le jquery

   $(document).ready(function(){ $("#message").hide(); $("#submitButtonId").on("click",function(e){ e.preventDefault(); var formdata = $(this.form).serialize(); $.post('../php_includes/insert.php', formdata, function(data){ $("#message").html(data); $("#message").fadeIn(500); $("#message").fadeOut(500); //Validate the form jQuery(function(){ jQuery("#bill_cost").validate({ expression: "if (VAL) return true; else return false;", message: "Please enter the Required field" }); jQuery('.myform').validated(function(){ }); }); //End of validation //Reset Form $('#myform')[0].reset(); }); return false; }); });  

Rien n’empêche votre formulaire de post. Déplacez votre code postal vers votre fonction validée.

Modifier – Ajout de code pour montrer comment valider puis soumettre. En outre, j’ai ajouté un type = “submit” au bouton, car le code de validation est automatiquement associé à l’événement de soumission du formulaire.

 $(document).ready(function(){ $("#message").hide(); //Define your validation rules. $("#bill_cost").validate({ expression: "if (!isNaN(VAL) && VAL) return true; else return false;", message: "Should be a number" }); //Define the event that will occur when the entire form is validated (on form submission) $('#myform').validated(function(){ var formdata = $('#myform').serialize(); //Post form data $.post('#', formdata, function(data){ //Process post response $("#message").html(data); $("#message").fadeIn(500); $("#message").fadeOut(500); }); //Reset Form $('#myform')[0].reset(); }); }); 

Essayez quelque chose comme ceci: Ici l’événement validated appelle le $.post , donc il ne s’exécute que lorsque le formulaire est validé.

 jQuery(function(){ $("#submitButtonId").on("click",function(e){ e.preventDefault(); var formdata = $(this.form).serialize(); //Validate the form jQuery("#bill_cost").validate({ expression: "if (VAL) return true; else return false;", message: "Please enter the Required field" }); return false; }); jQuery('.myform').validated(function(){ $.post('../php_includes/insert.php', formdata, function(data){ $("#message").html(data); $("#message").fadeIn(500); $("#message").fadeOut(500); //Reset Form $('#myform')[0].reset(); }); }); });