jquery tools validator question

Question

J'ai un lien qui quand cliqué d'email l'utilisateur atterrit sur une page qui charge un dialogue de recouvrement de jquery tools. Dans ce overlay dialog j'ai un formulaire avec des champs d'entrée et j'utilise jquery tools validator pour faire l'entrée d'utilisateur en temps réel validation. Le problème est que l'étiquette d'erreur noire des champs ne montre pas que la couleur du champ d'entrée est rouge, mais le message d'erreur contextuel noir n'apparaît pas. cela ne se produit pas si je lance une superposition en utilisant #overlayDialog dans les attributs href et rel du lien. le lien dans le courrier électronique n'est pas construit en utilisant le dialogue rel et href qui pointe vers le dialogue de superposition. Est-ce que ceci pourrait être le problème? est-ce un bug dans les outils jquery? et comment résoudre le problème?

--Update--

ci-dessous est la page html que les terres de l'utilisateur dans après avoir cliqué sur le lien de l'email. il est une vue de modèle de play framework

--- vue modèle play framework html -------

#{extends 'layout.html' /} 
#{set title: 
    messages.get('app.title') +' reset password ' /} 
    #{set 'moreScripts'} 
    <script type="text/javascript" src="@{'/public/theme/js/signup.js'}"></script> 

    <script> 
     $(document).ready(function(){ 
      /* $.tools.validator.fn("#username", function(input, value) { 
       return value!='Username' ? true : { 
        en: "Please complete this mandatory field" 
       }; 
      }); 
*/ 


      /* var form = $("#form").validator({ 
       position: 'bottom left', 
       offset: [5, 0], 
       messageClass:'form-error', 
       message: '<div><em/></div>' // em element is the arrow 
      }).attr('novalidate', 'novalidate'); 
*/ 
$("#resetPassword").overlay({ 

    // custom top position 
    top: 50, 

    // some mask tweaks suitable for facebox-looking dialogs 
    mask: { 

    // you might also consider a "transparent" color for the mask 
    color: '#fff', 

    // load mask a little faster 
    loadSpeed: 200, 

    // very transparent 
    opacity: 0.5 
    }, 

    // disable this for modal dialog-type of overlays 
    closeOnClick: false, 

    // load it immediately after the construction 
    load: true 

    }); 
//initialize validator for a bunch of input fields 
var inputs = $("#resetPasswordForm :input").validator({ 


    message: '<div><em/></div>', // em element is the arrow   

    grouped: true 
    }); 

      var submitFinished = function (data,errorDiv) { 
       if (data.success === true) { 

       if($("#reqPasswordErrorMessage")) 
       { 
        $("#reqPasswordErrorMessage").hide(); 
       } 

        var message=$("#reqPasswordSuccessMessage")[0]; 

        message.innerHTML = "User password has been reset successfully. "; 

        $("#reqPasswordSuccessMessage").show("fast"); 
        return; 

       } 
       else { 

        if($("#reqPasswordSuccessMessage")) 
        { 
         $("#reqPasswordSuccessMessage").hide(); 
        } 
        $("#reqPasswordErrorMessage").hide() 

        var errMessage = $(errorDiv)[0]; 

         errMessage.innerHTML = "<b>" + data.error + "</b>"; 
         $(errorDiv).show("fast"); 
         return; 
       } 
      } 

      $("#requestPasswordForm").submit(function() { 
       var formContents = $(this).serialize(); 
       $.ajax({ 
        url:$(this).attr("action"), 
        type:$(this).attr("method"), 
        data:formContents, 
        success:function (data) { 
         submitFinished(data,"#reqPasswordErrorMessage"); 
        } 

       }); 


       return false; 
      }); 
     }); 
    </script> 
#{/set} 


<div class="overlay-dialog main-content clearfix" id="resetPassword"> 
    <header> 
     <!-- <ul class="action-buttons clearfix fr"> 
      *{<li><a href="#" class="button button-gray">Register</a></li>}* 
      <li><a href="#" class="button button-gray"><span class="help"></span>Forgot Password</a></li> 
     </ul> --> 
     <h2>Reset Password</h2> 
     </header> 
     <div><p>Please use form below to set a new password.</p></div> 
    <section> 
    <!-- <div> <h6>Please use form below to reset a new password.</h6> 
    </div> --> 


     <div id="reqPasswordSuccessMessage" class="message success"> 

      <!-- &{'registration.passwordReset', email} --> 

     </div> 


     <div id="reqPasswordErrorMessage" class="message error"> 

     </div> 

    #{form @SignUp.resetPasswordAction(), id:"resetPasswordForm", defaultbutton:'#loginSubmitBtn'} 

      <div> 
      <label for="password" >New Password* 

      </label> 
       <input type="password" id="password" class="large" value="" 
         name="password" 
         required="required" minlength="6" pattern="(?=.*\d)(?=.*[a-zA-Z]).{6,}" data-message="Password does not meet criteria. Please Retry." title="Must be minimum 6 alphanumeric characters (at least 1 digit and one letter)" placeholder="Password"/> 
         <small>minimum 6 alphanumeric characters(at least 1 digit and one letter)</small> 

         </div> 



      <div><label for="passwordConfirm">Confirm Password* 

      </label> 
       <input type="password" id="passwordConfirm" class="large" value="" 
         name="passwordConfirm" 
         required="required" data-equals="password" data-message="Passwords do not match. Please try again." placeholder="Password"/> 
         <small>must match password</small> 
         </div> 
         <input type="hidden" id="email" name="email" value="&{email}"> 
      <div><button class="large button button-green fr " type="submit">Submit</button> 
     </div> 


    #{/form} 
    </section> 
</div> 

Answer 1

J'ai trouvé la réponse en changeant le code d'initialisation du validateur comme ci-dessous:

//initialize validator for a bunch of input fields 
     var inputs = $("#resetPasswordForm :input").validator({ 

      position: 'bottom left', 
      offset: [5, 0], 
      messageClass:'form-error', 
      message: '<div><em/></div>', // em element is the arrow 
     grouped: true 
     }); 
//fix for firefox and chrome browsers 
$("#resetPasswordForm").attr('novalidate', 'novalidate'); 

i également ajouté CheckValidity() sous forme fonction d'envoi comme ci-dessous:

$("#requestPasswordForm").submit(function() { 

       if (this.checkValidity()) { 
       var formContents = $(this).serialize(); 
       $.ajax({ 
        url:$(this).attr("action"), 
        type:$(this).attr("method"), 
        data:formContents, 
        success:function (data) { 
         submitFinished(data,"#resetPasswordErrorMessage"); 
        } 

       }); 
       } 

       return false; 
      }); 
     }); 

t Ces deux modifications ont corrigé le problème et les étiquettes des messages d'erreur sont affichées lors de la validation de l'erreur d'entrée.

--UPDATE--

ce correctif fonctionne dans Brower safari mais pour le faire fonctionner sur Firefox et Chrome, nous devons ajouter cette ligne ci-dessous l'initialisation des entrées var:

$("#resetPasswordForm").attr('novalidate', 'novalidate');