jquery tools validator issue

Question

i have a link that when clicked from email the user lands on a page that loads an overlay dialog from jquery tools .in this overlay dialog i have a form with input fields and i use jquery tools validator to do user input real time validation. the problem is that the black error label of the fields don't show only the input field color is turned to red but the black popup error message dos't show. this doesn't happen if i launch an overlay using the #overlayDialog in href and rel attributes of the link. the link in email is not constructed using the rel and href that point to overlay dialog. could this be the problem? is it a bug in jquery tools ?and how to fix the issue?

--Update--

below is the html page that user lands in after clicking link from email. it is a playframework template view

---playframework html template view-------

   #{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

I found the answer by changing the validator initialization code like below:

    //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 also added checkValidity() in form submit function like below:

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

these two changes fixed the issue and the error messages labels are shown on input error validation.

--UPDATE--

this fix works in safari brower but to get it work on firefox and chrome we need to add this line below the var inputs initialization:

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