jQuery Validation Envoi sans validation dans Firefox

Question

J'ai mis en place un script de concurrence assez simple - il a commenté ci-dessous et vous trouverez la démo à http://www.jakeisonline.com/stackoverflow/jqueryvalidation/page/

J'utilise un plugin jquery pour obtenir la validation: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Le problème est seulement dans Firefox (3.5.2) - le formulaire soumet sans n'importe quelle validation, et ignore l'ajax. IE8 & 7 semblent être bien.

$("#f").validate({ 
     rules: { 
      first_name: { 
       required: function() { 
        if ($.trim($("#first_name").val()) === 'e.g. Jane') { 
         $("#first_name").val('').removeClass('example'); 
         return $("#first_name").val(); 
        }      
       } 
      }, 
      email: { 
       required: function() { 
        if ($.trim($("#email").val()) === 'jane@example.com') { 
         $("#email").val('').removeClass('example'); 
         return $("#email").val(); 
        } 
       } 
      }, 
      friend_1_name: { 
       required: function() { 
        if ($.trim($("#friend_1_name").val()) === 'e.g. Jane') { 
         $("#friend_1_name").val('').removeClass('example'); 
         return $("#friend_1_name").val(); 
        }      
       } 
      }, 
      friend_1_email: { 
       required: function() { 
        if ($.trim($("#friend_1_email").val()) === 'jane@example.com') { 
         $("#friend_1_email").val('').removeClass('example'); 
         return $("#friend_1_email").val(); 
        } 
       } 
      }, 
      friend_2_name: { 
       required: "#friend_2_email:filled" 
      }, 
      friend_2_email: { 
       required: "#friend_2_name:filled" 
      }, 
      friend_3_name: { 
       required: "#friend_3_email:filled" 
      }, 
      friend_3_email: { 
       required: "#friend_3_name:filled" 
      } 
     }, 
     submitHandler: function() { 
      $("#submit").attr("disabled", "disabled");     

      // See if they also opted-in to the main mailing list, if they did, set that interest and add them to the mailing list 
      if ($('#optin').is(':checked')) { 
       alert('hello'); 
       $.post("", { first_name: $("#first_name").val(), email: $("#email").val(), key: "sub-678-1.50;1.0.1.0.0.0.0.0.0.0.0.0.0.0.0.0;2.1;subscribe-50.htm", 'prefs[]': ["1", "2"] }); 
       // Display the opt-in confirmation message 
       $("#thanks_subscribing").fadeIn("slow"); 
       $("#optintickbox").hide(); 

       // Fade out the confirmation 
       setTimeout(function() { 
        $("#thanks_subscribing").fadeOut("slow") 
       },10000); 

      } else { 
       // Add them to the Entries Mailing List 
      $.post("", { first_name: $("#first_name").val(), email: $("#email").val(), key: "sub-678-1.50;1.0.1.0.0.0.0.0.0.0.0.0.0.0.0.0;2.1;subscribe-50.htm", followup: "1", prefs: "2"}); 
      } 

      // Now start going through their friends, the first friend will always be filled out, so we don't need to check that 
      $.post("", { first_name: $("#friend_1_name").val(), email: $("#friend_1_email").val(), key: "sub-678-1.51;1.0.1.0.0.0.0.0.0.0.0.0.0.0.0.0;2.1;subscribe-51.htm", followup: "2", custom_4: $("#first_name").val(), custom_5: $("#email").val()}); 

      if ($("#friend_2_email").val() !== '') { 
       $.post("", { first_name: $("#friend_2_name").val(), email: $("#friend_2_email").val(), key: "sub-678-1.51;1.0.1.0.0.0.0.0.0.0.0.0.0.0.0.0;2.1;subscribe-51.htm", followup: "2", custom_4: $("#first_name").val(), custom_5: $("#email").val()}); 
      } 

      if ($("#friend_3_email").val() !== '') { 
       $.post("", { first_name: $("#friend_3_name").val(), email: $("#friend_2_email").val(), key: "sub-678-1.51;1.0.1.0.0.0.0.0.0.0.0.0.0.0.0.0;2.1;subscribe-51.htm", followup: "2", custom_4: $("#first_name").val(), custom_5: $("#email").val()}); 
      } 

      // Remove all of the submitted data to stop button spamming 
      $("#friend_1_name, #friend_1_email, #friend_2_name, #friend_2_email, #friend_3_name, #friend_3_email").val(''); 

      // Bring the submit button out of disabled state 
      $("#submit").removeAttr("disabled"); 

      // Bring up the friends sent confirmation 
      $("#friends_sent").fadeIn("slow"); 
      //$("#optin").attr('false', true); 

      // Fade out the confirmation 
      setTimeout(function() { 
       $("#friends_sent").fadeOut("slow") 
      },10000); 

      return false; 
     } 
    }); 

Je ne suis pas sûr de savoir pourquoi Firefox communique la avec Refresh mais IE est pas, je l'ai regardé et sur le code et ne peut pas trouver l'erreur. Firebug ne trouve que des erreurs dans la bibliothèque jQuery elle-même.

Quelqu'un peut-il aider?

Answer 1

Vous avez plusieurs problèmes de validation dans votre balisage XHTML 1.0 Transitional. IE est gentil en vous aidant. FF est plus stricte et échouera.

L'absence d'étiquettes de fermeture d'entrée fait des ravages avec les sélecteurs dans le script de validation. Sur le 1er email d'un ami, il essaie en fait d'obtenir le texte d'un élément li!

Voir le suivant w3c validator check. Fixez-les d'abord, j'espère que cela réglera le problème. Si ce n'est pas le cas, je regarderai à nouveau.