jquery 도구 유효성 검사기 문제

Question

jquery tools에서이 사용자가 overlay dialog의 양식을 가지고 있으며 사용자 입력을 실시간으로 처리하기 위해 양식을 사용하는 경우 이메일을 클릭하면 사용자가 오버레이 대화 상자를로드하는 페이지로 연결되는 링크가 있습니다. 확인. 문제는 필드의 검은 색 오류 레이블은 입력 필드 색만 빨간색으로 표시되지만 검은 색 팝업 오류 메시지는 표시되지 않습니다. 링크의 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'); 

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

톤을 :

은 또한 다음과 같은 기능을 제출 양식 checkValidity()를 첨가하여 두 가지 변경 사항으로 문제가 해결되고 입력 오류 검증시 오류 메시지 레이블이 표시됩니다.

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