Question

我的表单完整地贴在下面，不会在IE8中验证。没有错误 - 验证被忽略，因此人们可以提交任何内容。我正在使用jquery 1.8.1和验证插件版本1.9。这是语法问题吗？在IE9，Chrome或Firefox中没有问题。

将所有内容粘贴在下面，因为我不知道问题出在哪里。

<!DOCTYPE HTML>
<html>
<head>
<!-- HTML5 biolerplace stuff below -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="">
<meta name="viewport" content="">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.1.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/vendor/jquery.defaultvalue.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>

<style>
#formwrapper {
    height:275px; 
    width:250px; 
    background-color: #f8f8f8; 
    border: 1px solid #cccccc; 
    padding: 25px 0 25px 25px;
    font-family: arial;
    font-size: 12px;
    }

.entry {
    border: 1px solid #cccccc; 
    margin: 5px 0; 
    width: 212px; 
    /* height: 26px; */
    color: black;
    padding: 7px 0 7px 10px;
    }

#form_title, #button {
    font-size: 18px;
    }

#form_title {
    color: #00589f;
    margin-bottom: 20px;
    }

#button {
    width: 80px;
    height: 24px;
    position: relative;
    left: 143px;
    top: 15px;
    background-color: #00589f;
    border: none;
    color: white !important;
    }

.error {
    border: 1px solid red; 
    background:#FFFFFF;
    content: "text"
    }

.empty {
    color: #ccc;
    }

</style>

<script type="text/javascript">
    //form validation start
   $(document).ready(function() {
        //$('form').submit(function(){
        //  $('.incomplete').val('');
        //}); 
        //reject default values
       $("#form").validate({
            wrapper: ".formwrapper",
            keyup: false,
            //onfocusout: false,
            //onclick: false,
            //onchange: false,
            errorLabelContainer: ".form",
            //errorClass: "incomplete",
            rules: {
                organization: {
                    required: true,
                    minlength: 2
                    },
                firstname: {
                    required: true,
                    minlength: 2
                    },
                lastname: {
                    required: true,
                    minlength: 2
                    },
                email: {
                    required: true,
                    email: true
                    },
                phone: {
                    required: true,
                    minlength: 10,
                    digits: true
                    }
            }
        });
    }); 

</script>

</head>
<body>

<div id="formwrapper">
    <div id="form_title">REQUEST INFO</div>
    <form id="form" name="form_container" action="#">
        <!-- fields -->
        <input class="entry" id="organization" type="text" name="organization" placeholder="Organization"/>
        <input class="entry" id="firstname" type="text" name="firstname" placeholder="First Name"/>
        <input class="entry" id="lastname" type="text"  name="lastname" placeholder="Last Name"/>
        <input class="entry" id="email" type="text" name="email" placeholder="Email"/>
        <input class="entry" id="phone" type="text" name="phone" placeholder="Phone"/>
        <!-- submit button -->
        <input id="button" class="button" type="submit" value="Submit" /> 
    </form>
</div>
<script>
    //talks to defaultvalue plugin to make placeholders work in IE
    $('#organization, #firstname, #lastname, #email, #phone').defaultValue();
</script>
</body>
</html>

Answer 1

我正在使用带有Razor视图的MVC 4，并且IE8中需要触发每个字段，包括复选框，文本框，我的MVC模型中不需要的下拉列表。

我能够通过降级jquery和jquery.validate版本来解决它。

不工作

<script src="~/javascript2/Menu/jquery-2.0.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

<强>作品

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

Answer 2

您需要更新jquery.validate库。

请参阅此post

享受！

Answer 3

如果任何未来的人有同样的问题，那就回答我自己的问题。问题是与插件不兼容，使占位符在IE中工作。我将占位符转换插件更改为https://github.com/mathiasbynens/jquery-placeholder，以下代码有效：

<!DOCTYPE HTML>
<html>
<head>
<!-- HTML5 biolerplace stuff below -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="">
<meta name="viewport" content="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script >window.jQuery || document.write('<script src="js/vendor/jquery-1.8.1.min.js"><\/script>')</script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script >window.jQuery || document.write('<script src="js/vendor/jquery.validate.min.js"><\/script>')</script>
<script src="js/vendor/jquery.placeholder.min.js"></script>
<script src="js/vendor/modernizr-2.6.1.min.js"></script> 
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.1.min.js"></script> 

<style>
#formwrapper {
    height:275px; 
    width:250px; 
    background-color: #f8f8f8; 
    border: 1px solid #cccccc; 
    padding: 25px 0 25px 25px;
    font-family: arial;
    font-size: 12px;
    }

.entry {
    border: 1px solid #cccccc; 
    margin: 5px 0; 
    width: 212px; 
    /* height: 26px; */
    color: #000;
    padding: 7px 0 7px 10px;
    }

.entry[attr="placeholder"] {
    color: #ccc;
    }

#form_title, #button {
    font-size: 18px;
    }

#form_title {
    color: #00589f;
    margin-bottom: 20px;
    }

#button {
    width: 80px;
    height: 24px;
    position: relative;
    left: 143px;
    top: 15px;
    background-color: #00589f;
    border: none;
    color: white !important;
    }

.error {
    border: 1px solid red; 
    background:#FFFFFF;
    content: "text"
    }

input:-moz-placeholder {
    color: #ccc;
    }

</style>

<script type="text/javascript">
    //form validation start
$(document).ready(function() {
    //reject defaults for IE placeholder fix
    jQuery.validator.addMethod("defaultInvalid", function(value, element) {
    switch (element.value) {

        case "Organization": 
        if (element.name == "Organization") return false;
        break;

        case "First Name": 
        if (element.name == "First Name") return false;
        break;

        case "Last Name": 
        if (element.name == "Last Name") return false;
        break;

        case "Email": 
        if (element.name == "Email") return false;
        break;

        case "Phone": 
        if (element.name == "Phone") return false;
        break;

        default: return true;
        break;
    } 
    }); 
    //form validation start
   $("#form").validate({
        wrapper: ".formwrapper",
        keyup: false,
        //onfocusout: false,
        //onclick: false,
        onchange: false,
        errorLabelContainer: ".form",
        rules: {

            organization: {
                defaultInvalid: true,
                required: true,
                minlength: 2
                },

            firstname: {
                defaultInvalid: true,
                required: true,
                minlength: 2
                },

            lastname: {
                defaultInvalid: true,
                required: true,
                minlength: 2
                },

            email: {
                defaultInvalid: true,
                required: true,
                minlength: 2,
                email: true
                },

            phone: {
                defaultInvalid: true,
                required: true,
                minlength: 9,
                digits: true
                }
        }
    });
        //placeholders in IE
    $('input').placeholder();
});

</script>

</head>
<body>

<div id="formwrapper">
    <div id="form_title">REQUEST INFO</div>
    <form id="form" name="form_container" action="#">
        <!-- fields -->
        <input class="entry" id="organization" type="text" name="organization" placeholder="Organization"/>
        <input class="entry" id="firstname" type="text" name="firstname" placeholder="First Name"/>
        <input class="entry" id="lastname" type="text"  name="lastname" placeholder="Last Name"/>
        <input class="entry" id="email" type="text" name="email" placeholder="Email"/>
        <input class="entry" id="phone" type="text" name="phone" placeholder="Phone"/>
        <!-- submit button -->
        <input id="button" class="button" type="submit" value="Submit" /> 
    </form>
</div>
<script>
    //clear invalids w/ error class on submit
    $('form').submit(function(){
        $('.error').val('');
    }); 
</script>
</body>
</html>

jQuery验证：在IE8中忽略了表单验证

3 个答案: