我已经阅读了很多关于IE 8及更少的jQuery Validate兼容性问题的帖子,但到目前为止我还没有找到解决方案。我的网站上有联系表单,当用户点击提交按钮时,验证不会发生。它在IE 9,10和11以及其他浏览器中都可以正常工作,但不能在IE 8或更低版本中使用。
我的jQuery版本: 1.11.2
jQuery验证版本: 1.13.0
contact.php
<form id="contactform" method="POST" action="system/process-send-contact-form-email.php">
<div class="form-block">
<div class="form-element">
<div class="form-label">
<label for="contact-name">Name*</label>
</div>
<div class="form-input">
<input name="name" type="text" id="contact-name">
</div>
</div>
<div class="form-element">
<div class="form-label">
<label for="contact-street">Street</label>
</div>
<div class="form-input">
<input name="street" type="text" id="contact-street">
</div>
</div>
<div class="form-element">
<div class="form-label">
<label for="contact-zip-town">ZIP</label>
</div>
<div class="form-input">
<input name="plz-ort" type="text" id="contact-zip-town">
</div>
</div>
<div class="form-element">
<div class="form-label">
<label for="contact-email">Email*</label>
</div>
<div class="form-input">
<input name="email" type="text" id="contact-email">
</div>
</div>
<div class="form-element">
<div class="form-label">
<label for="contact-subject">Subject: </label>
</div>
<div class="form-input">
<input name="betreff" type="text" id="contact-subject">
</div>
</div>
<div class="form-element">
<div class="form-label">
<label for="contact-message">Ihre Nachricht*</label>
</div>
<div class="form-input">
<textarea name="nachricht" id="contact-message"></textarea>
</div>
</div>
<p class="align-right align-right-button">
<input name="submit-send-contact-email" type="submit" class="button"
value="Submit">
</p>
</div>
</form>
main.js:
$('#contactform').validate({
// specify rules
rules: {
name: {
required: true,
minlength: 1,
maxlength: 100
},
email: {
required: true,
customEmailCheck: true
},
betreff: {
required: true,
minlength: 5,
maxlength: 100
},
nachricht: {
required: true,
minlength: 10,
maxlength: 1000
}
},
// specify error messages
messages: {
name: {
required: "Please indicate name."
},
email: {
required: "Please indicate email."
},
betreff: {
required: "Please indicate subject."
},
nachricht: {
required: "Please enter a message."
}
},
// change name of error class that is assigned to input fields
errorClass: 'error_validate',
errorPlacement: function (label, element) {
// default
label.insertAfter(element);
}
})
;
的header.php:
<!DOCTYPE html >
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
<meta http-equiv="Content-Language" content="de"/>
<title>My webiste</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="expires" content="43200"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<meta name="audience" content="Alle"/>
<meta name="ROBOTS" content="INDEX,FOLLOW"/>
<meta name="revisit-after" content="2 days"/>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
<!-- Make sure HTML5 tags work in older IE versions -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- *** Stylesheets *** -->
<link rel="stylesheet" type="text/css" href="assets/css/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/jquery-ui.theme.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css"/>
</head>
footer.php:
<!-- *** Scripts *** -->
<!-- * General * -->
<!-- Modernizr -->
<script src="assets/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/js/jquery-1.11.1.min.js.js"><\/script>')</script>
<!-- jQuery UI -->
<script src="assets/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/js/plugin-validate.js"></script>
<script type="text/javascript" src="assets/js/plugin-validate-additional-methods-min.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>