jqueryツールバリデータの問題

Question

jquery tools .inからoverlay dialogへのオーバーレイダイアログを読み込むページにユーザーがリンクすると、入力フィールドがあるフォームがあり、ユーザー入力をリアルタイムで行うにはjquery tools validatorを使用します検証。 問題は、フィールドの黒いエラーラベルは入力フィールドの色だけが赤色に変わりますが、黒色のポップアップエラーメッセージは表示されないことを示しています。 リンクのhrefとrel属性で#overlayDialogを使用してオーバーレイを起動すると、これは起こりません。オーバーレイダイアログをポイントするrelとhrefを使用して電子メールのリンクが構築されていません。これが問題だろうか？ jqueryツールのバグですか？この問題を解決する方法は？以下

--Update--

ユーザーは電子メールからのリンクをクリックした後で着地することを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

playframework HTMLテンプレートビュー--- playframeworkテンプレートビュー

である私は、以下のようなバリデータの初期化コードを変更することで答えを見つけました：

//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はまた、以下のような機能を提出する形でcheckValidity（）を追加しました：

$("#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; 
      }); 
     }); 

トン2つの変更により問題が解決され、エラーメッセージのラベルが入力エラーの検証時に表示されます。

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