jquery de validation de formulaire ajaxSubmit()

Je suis très frustré par cette jquery de validation de formulaire ajaxSubmit();

Dans chrome, il semble échouer en silence, sans même frapper la submitHandler, firefox ne, mais tout se passe à l'action="contact.php" la page. Je m'attendais à les poster en arrière-plan et, éventuellement, de retour des résultats, mais ne pouvez pas l'obtenir pour travailler de cette façon.

Edit: Trouvé un correctif pour ce si quelqu'un d'autre est intéressé, mettre cette ligne de code quelque part dans votre dom prêt. 

//disable HTML5 native validation and let jquery handle it.
    $('form').attr('novalidate','novalidate');

Formulaire HTML:

<form method="post" action="contact.php" id="contact">
    <fieldset>
        <input type="text" id="email" class="required email" name="email"  maxlength="30" value="youremail @ example.com" />
        <input type="text" id="subject" class="required" name="subject" maxlength="24" value="Enter your subject" />
        <textarea id="msg" class="required textarea" name="msg" cols="30" rows="5">Reason for contact.</textarea>
        <input type="submit" class="formBtn" value="Punch me an Email" />
    </fieldset>
</form>

JQuery:

$(window).load(function(){
    $('#contact').validate({
            rules:{
                email:{required: true, email:true},
                subject:{required: true, minlength: 5},
                msg:{required: true, minlength: 50}
            },
            messages:{
                email:'',
                subject: '',
                msg: ''
            },
            invalidHandler:function(){
                $('div.error').hide();
            },
            focusInvalid:true,
            onfocusout:false,
            submitHandler: function() {
               //never hits with chrome, and alert works in FF4, 
               //but still goes to contact.php
               $('#contact').ajaxSubmit();
           }
        });
});

OriginalL'auteur robx | 2011-05-17

  1. 9

    Je ne suis pas vraiment familier avec la validation de plugin, mais je voudrais l'essayer dans l'autre sens, en validant le formulaire dans le formulaire du plugin beforeSubmit événement:

    $('#contact').ajaxForm({
  beforeSubmit: function() {
    $('#contact').validate({ /* ... */ });
    return $('#contact').valid();
  },
  success: function(resp) {
    alert(resp);
  }
});
    docs.jquery.com/Plugins/Validation/validate#options j'ai été en haut et en bas de cette page de document et je fait de la façon qu'ils ont montré. Même essayé en l'enveloppant dans un $('#contact").submit(function(){}), mais pas aller.
    Merci. Depuis que j'ai trouvé la cause de racine de la forme, non de la validation, votre méthode fonctionne comme un charme.

    OriginalL'auteur istvan.halmen

  2. 0

    submitHandler est un nom de soumettre événement est déclenché, donc ajaxForm inscrit son propre présenter gestionnaire d'événement après l'événement submit, ce qui est probablement trop tard pour le rattraper.

    Vous n'avez pas à imbriquer les deux plugins, suffit de les valider en premier et ajaxify deuxième:

    $('#contact').validate({...});
$('#contact').ajaxForm();

    De cette façon, le gestionnaire d'événements de validation est appelé en premier, et l'événement est arrêté avant d'arriver à l'ajax gestionnaire de soumission si elle est invalide.

    quoi? Si vous le faites de cette façon, le script va essayer de ajaxSubmit avant même qu'elle valide. Fondamentalement, il va essayer de ajaxsubmit chaque fois que le chargement de la page ou actualise.
    ouais, mauvais nom de la fonction. Fixe.

    OriginalL'auteur Tgr

  3. 0
    <form id="Form1">    
...    
<button type="submit" onclick="return SendData()"> 
</form>

<script>

$(function () {
   $("#Form1").validate();
});

function SendData(){
   if ($("#Form1").valid()) {
      $.ajax({
         url: "/WebService/....",
         type: "post",
         dataType: "json"
         //....
      });

      //do ajax but not submit
      return false;
   }
   //checkdata
   return true;
}
</script>

    OriginalL'auteur user3020010