IE 8及更低版本:jQuery Validate不起作用

时间:2015-05-30 12:48:11

标签: javascript jquery jquery-validate

我已经阅读了很多关于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>

0 个答案:

没有答案