jquery erreur de style de message validateur IE08 uniquement lorsque personnalisé en utilisant la fonction errorPlacement

Question

Pour en revenir à la solution errorplacement par Nadia (jQuery override default validation error message display (Css) Popup/Tooltip like)

Je l'ai essayé et il fonctionne comme un charme dans Safari et Firefox, mais provoque IE08 pour contourner jqueryvalidator et allez directement sur le validateur côté serveur.

Mon code est ce - dès que j'insère 'élément d'erreur .... il est instable dans IE08. Toute aide très appréciée

<script type="text/javascript"> 
$(document).ready(function() { 
     $("#sampleform").validate({ 
     rules: { 
       dinername: "required", 
       venue: "required", 
       contact: "required", 
       dinertelephone: "required", 
       venuetime: "required", 
       numberdiners: "required", 
       dineremail: { required: true, email: true}, 
       datepicker: { required: true,date: true} 
       }, 

     messages: { 
       dinername: "Your name?", 
       numberdiners: "How many guests?", 
       dinertelephone: "Your mobile?", 
       venue: "Which restaurant?", 
       venuetime: "Your arrival time?", 
       datepicker: "Your booking date?", 
       dineremail: "Please enter a valid email address", 
       }, 

       errorElement: "div", 
       errorPlacement: function(error, element) { 
         element.before(error); 
         offset = element.offset(); 
         error.css('right', offset.right); 
         error.css('right', offset.right - element.outerHeight()); 
                 } 


      }); 
}); 

    </script> 

<script type="text/javascript"> 
$(function() { 
    $("#datepicker") .datepicker({minDate: 0, maxDate: '+6M +0D',dateFormat: 'DD, d M yy',onClose: function() {$(this).valid();} 

    }); 

    }); 
</script> 

Answer 1

Votre problème est les deux dernières lignes du code ci-dessous: (. Erreur de la valeur de l'analyse syntaxique pour « droit » abandonné Déclaration.)

offset = element.offset(); 
error.css('right', offset.right); 
error.css('right', offset.right - element.outerHeight()); 

Firefox donne un avertissement, mais fonctionne, cependant, IE échoue complètement. J'ai répliqué votre code localement, et dès que j'ai pris ces lignes, cela a fonctionné sur Internet Explorer. Si vous supprimez ces deux dernières lignes, vous pouvez également supprimer la première car vous n'en aurez plus besoin.

Fondamentalement, si vous ne avez utilisé le placement d'erreur personnalisée parce que vous vouliez avoir le message d'erreur au-dessus du champ de saisie plutôt qu'en dessous, cela suffira:

errorElement: "div", 
errorPlacement: function(error, element) { 
     element.before(error); 
} 

Ensuite, plutôt que d'utiliser jQuery pour ajouter Les propriétés CSS pour le positionnement de votre élément d'erreur, je vous suggère de créer simplement une classe CSS .error dans votre fichier CSS et de jouer avec cela à votre guise, sans avoir à utiliser de code jQuery supplémentaire.

---

EDIT: J'ai testé le code suivant dans IE6, IE8 et FF 3.6.4 ainsi, et il fonctionne très bien.

Le code HTML - Vous pouvez le copier à partir d'ici parce que vos erreurs de syntaxe avait un code d'origine en raison de citations non fermées et des espaces manquants entre les attributs (rangement le reste de votre code pourrait être une bonne idée aussi):

<form id="sampleform" action="bookingform.php" method="post"> 
    <fieldset class="contact"> 
     <legend>Your contact details</legend> 
      <div class="formfiller"> 
       <label for="dinername">Full name:</label><input name="dinername" id="dinername" type="text" /> 
      </div> 
      <div class="formfiller"> 
       <label for="dinertelephone">Telephone:</label><input name="dinertelephone" id="dinertelephone" type="text" /> 
      </div> 
      <div class="formfiller"> 
       <label for="dineremail">Email:</label><input name="dineremail" id="dineremail" type="text" /> 
      </div> 
    </fieldset> 
    <fieldset class="contact"> 
     <legend>Your booking details</legend> 
     <div class="formfiller"> 
      <label for="venue">Venue:</label> 
      <select name="venue" id="venue"> 
       <option value="" >-- Select Venue--</option> 
       <option value="Sunday Buffet">Sunday Buffet</option> 
       <option value="Tiffin Room">Tiffin Room</option> 
       <option value="Private Room">Private Room</option> 
       <option value="Restaurant">Main Restaurant</option> 
      </select> 
     </div> 
     <div class="formfiller"> 
      <label for="numberdiners">No of diners:</label><input name="numberdiners" id="numberdiners" type="text" /> 
     </div> 
     <div class="formfiller"> 
      <label for="datepicker">Date:</label><input name="datepicker" id="datepicker" type="text" /> 
     </div> 
     <div class="formfiller"> 
      <label for="venuetime"> Arrival time:</label> 
      <select name="venuetime" id="venuetime"> 
       <option value="">-- Select arrival time--</option> 
       <option value="12.00pm"> 12.00pm - lunch begins</option> 
       <option value="12.15pm">12.15pm</option> 

       <option value="12.30pm">12.30pm</option> 
       <option value="12.45pm">12.45pm</option> 
       <option value="1.00pm">1.00pm</option> 
       <option value="1.15pm">1.15pm</option> 
       <option value="1.30pm">1.30pm</option> 
       <option value="1.45pm">1.45pm</option> 
       <option value="2.00pm">2.00pm</option> 
       <option value="6.00pm">6.00pm - dinner begins</option> 

       <option value="6.15pm">6.15pm</option> 
       <option value="6.30pm">6.30pm</option> 
       <option value="6.45pm">6.45pm</option> 
       <option value="7.00pm">7.00pm</option> 
       <option value="7.15pm">7.15pm</option> 
       <option value="7.30pm">7.30pm</option> 
       <option value="7.45pm">7.45pm</option> 
       <option value="8.00pm">8.00pm</option> 
       <option value="8.15pm">8.15pm</option> 

       <option value="8.30pm">8.30pm</option> 
       <option value="8.45pm">9.45pm</option> 
       <option value="9.00pm">9.00pm</option> 
       <option value="9.15pm">9.15pm</option> 
       <option value="9.30pm">9.30pm</option> 
      </select> 
     </div> 
     <div class="formfiller"> 
      <label for="requirements">Queries:</label><textarea name="requirements" cols="35" rows="2" id="requirements"></textarea> 
     </div> 
    </fieldset> 
    <div id="enquiry"> 
     <button type="submit">BOOK NOW</button> 
    </div> 
</form> 

le script jQuery:

$(document).ready(function() { 
    /* Create Datepicker */ 
    $("#datepicker").datepicker({ minDate: 0, maxDate: '+6M +0D', dateFormat: 'DD, d M yy'}); 

    /* Validate the form */ 
    $("#sampleform").validate({ 
     rules: { 
      dinername: {required: true}, 
      venue: {required: true}, 
      dinertelephone: {required: true}, 
      venuetime: {required: true}, 
      numberdiners: {required: true}, 
      datepicker: {required: true}, 
      dineremail: {required: true, email: true} 
     }, 
     messages: { 
      dinername: {required: 'Your name?'}, 
      numberdiners: {required: 'How many guests?'}, 
      dinertelephone: {required: 'Your mobile?'}, 
      venue: {required: 'Which restaurant?'}, 
      venuetime: {required: 'Your arrival time?'}, 
      datepicker: {required: 'Your booking date?'}, 
      dineremail: { 
       required: 'Please enter an email address', 
       email: 'Please enter a valid email address' 
      } 
     }, 
     errorElement: "div", 
     errorPlacement: function(error, element) { 
      element.before(error); 
     } 
    }); 
}); 

Vous remarquerez sans doute que je prends la règle date: true du va lidation de la boîte de datepicker. La raison en est que ceci validera seulement si le format est xx/yy/zzzz et non longday, xx yyy zzzz comme vous l'avez. Pour cela, vous devrez créer une méthode de validation personnalisée en utilisant addMethod, mais c'est une boîte de Pandore complètement différente.

Dans IE6, vous pouvez obtenir une boîte indésirable sur le datepicker avec le mot "false" à l'intérieur. Ceci peut être facilement résolu en ajoutant la ligne suivante dans votre fichier CSS:

iframe.ui-datepicker-cover { display:none; } 

En outre, en ce qui concerne votre question sur ce débogueur j'utilise, il est Webdeveloper Toolbar for Internet Explorer pour IE et FF pour FireBug.

Espérons que cela résoudra vos problèmes!