0

以下に全体を貼り付けた私のフォームは、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>
4

3 に答える 3

0

jquery.validateライブラリを更新する必要があります。

この投稿を見る

楽しみ ！

于 2012-09-12T23:11:25.473 に答える
0

将来の人々が同じ問題を抱えているかどうか、私自身の質問に答えるつもりです. 問題は、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>
于 2012-09-13T22:22:50.593 に答える