3
jQuery Validate FrameworkとqTip 2.0を使用しようとしています。jQuery Validate Framework + q提出時に発射されないヒット
これはChromeでは動作しますが、IE9では動作しません。
<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>