Question

Hereunder, I m trying to use jQuery Validate Framework with qTip 2.0.

This is working in Chrome but not in IE9, any ideas?

<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" 
     type="text/javascript"></script>
  <script src="jquery.qtip.min.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="jquery.qtip.min.css"/>
  <script type="text/javascript" 
     src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {

var myForm = $( form:first );

   myForm.validate({
         errorClass: "errormessage",
         onkeyup: false,
         errorClass:  error ,
         validClass:  valid ,
         rules: {
            fullname: { required: true, minlength: 3 },
            email: { required: true, email: true }
         },
         errorPlacement: function(error, element)
         {
            // Set positioning based on the elements position in the form
            var elem = $(element),
               corners = [ left center ,  right center ],
               flipIt = elem.parents( span.right ).length > 0;

            // Check we have a valid error message
            if(!error.is( :empty )) {
               // Apply the tooltip only if it isn t valid
               elem.filter( :not(.valid) ).qtip({
                  overwrite: false,
                  content: error,
                  position: {
                     my: corners[ flipIt ? 0 : 1 ],
                     at: corners[ flipIt ? 1 : 0 ],
                     viewport: $(window)
                  },
                  show: {
                     event: false,
                     ready: true
                  },
                  hide: false,
                  style: {
                     classes:  ui-tooltip-red ui-tooltip-rounded  // Make it red... the classic error colour!
                  }
               })

               // If we have a tooltip on this element already, just update its content
               .qtip( option ,  content.text , error);
            }

            // If the error is empty, remove the qTip
            else { elem.qtip( destroy ); }
         },
         success: $.noop, // Odd workaround for errorPlacement not firing!
   });
});

</script>
<form id="MyForm" autocomplete="off" method="post">
   <input id="Field1" name="fullname" 
          type="text" 
          value="" maxlength="20" />
   <br/>
   <input id="Field2" name="email" 
          type="text" 
          value="" maxlength="255" />
   <br/>
   <input type="submit" value="Submit order" />
</form>
</body>
</html>

Answer 1

The last element in your array/object ends in a trailing comma, IE will not like this but other browsers are OK with it.

 success: $.noop    // removed comma

友情链接