Question

我有一个链接，当从电子邮件中点击时，用户登陆一个页面，该页面从jquery tools加载一个叠加对话框。在此overlay dialog我有一个带有输入字段的表单，我使用{{3用户输入实时验证。问题是字段的黑色错误标签不显示只有输入字段颜色变为红色但黑色弹出错误消息不显示。如果我使用链接的href和rel属性中的#overlayDialog启动叠加层，则不会发生这种情况。电子邮件中的链接不是使用指向叠加对话框的rel和href构建的。这可能是问题吗？它是jquery工具中的一个错误吗？以及如何解决这个问题？

- 更新 -

下面是用户点击电子邮件链接后登录的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;
            });
        });

这两项更改解决了问题，并在输入错误验证时显示错误消息标签。

- UPDATE -

此修复程序适用于safari浏览器，但要使其在firefox和chrome上运行，我们需要在var输入初始化下面添加此行：

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

jquery工具验证器问题

1 个答案: