jquery工具驗證問題

Question

我有一個鏈接，當從電子郵件點擊用戶登陸頁面加載覆蓋對話框從jquery tools。在這overlay dialog我有一個窗體與輸入字段，我用jquery tools validator做用戶輸入實時驗證。 問題是，字段的黑色錯誤標籤不顯示只有輸入字段顏色變成紅色，但黑色彈出錯誤信息dos't顯示。 如果我在鏈接的href和rel屬性中使用#overlayDialog啓動覆蓋，則不會發生這種情況。電子郵件中的鏈接不是使用指向覆蓋對話框的rel和href構造的。這可能是問題嗎？這是jQuery工具中的錯誤嗎？以及如何解決這個問題？下面

--Update--

是HTML的網頁，點擊從電子郵件中的鏈接後，用戶的土地。它是一個playframework模板視圖

--- playframework 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

我改變像下面的驗證初始化代碼找到了答案：

//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'); 

我還在表單提交函數中添加了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; 
      }); 
     }); 

t這兩個修改解決了問題，錯誤消息標籤顯示在輸入錯誤驗證中。

--UPDATE--

此修復工作在Safari布勞爾但要得到它火狐和Chrome的工作，我們需要添加下面的VAR輸入初始化這一行：

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