I have read many posts already on the jQuery Validate compatibility issue with IE 8 and less, but I have not found a solution so far. I have a contact form on my website and when the user clicks the submit button, the validation does not take place. It all works fine in IE 9, 10 and 11 and in other browsers, but not in IE 8 or less.
My jQuery version: 1.11.2
jQuery Validate version: 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>
