jquery - JQuery 検証 errorClass

Question

私の JQuery 検証でいくつかのクロス ブラウザーの問題が発生した後、IE8 が次の使用を好まないという事実に絞り込みました。

errorElement: 'validation-error',

私が達成したいのは、検証エラーが同じ行の入力ボックスの直後に表示されることだけです。私はインターネットで多くの例を試しましたが、最も近いものはこれです:

入力ボックスの直後にエラー ラベルが表示されますが、入力ボックス内のテキストにもエラーの css が適用されます (これは、正しく入力すると消えます)。入力ボックスに入力された実際のテキストではなく、正しいcssクラスが適用された状態でエラーが表示されるようにしたいだけです!

私のコードは次のとおりです。

JS

$(function() {
            $( "#loginform" ).validate({
                errorClass: 'validation-error'
                ,errorElement:'span'
                ,rules: {
                    text_user_id: {
                        required: true,
                        minlength: 4,
                        maxlength: 20
                    }
                    ,text_password: {
                        required: true,
                        minlength: 8,
                        maxlength: 20
                    }
               }
               ,messages: {
                    text_user_id: {
                        required: "Please enter a User ID",
                        minlength: $.format("At least {0} characters required!"),
                        maxlength: $.format("Maximum of {0} characters allowed!")
                    }
                    ,text_password: {
                        required: "Please enter a Password",
                        minlength: $.format("At least {0} characters required!"),
                        maxlength: $.format("Maximum of {0} characters allowed!")
                    }
                }
            });
        });

CSS

.validation-error {
float: none; 
color: #FF0000;
padding-left: 5px; 
vertical-align: top; 

}

HTML (フォーム)

<form id="loginform" class="login-form" method="post" action="process_login.php">

<div id="login_form-error">
    <?php
        if (isset($_GET['error']))
        {
            echo $_GET['error'];
        }
    ?>
</div>

<div>
    <label>User ID:</label>
    <input id="text_user_id" name="text_user_id" type="text" onkeyup="user_id_change()"/>
</div>
<div>
    <label>Password:</label>
    <input id="text_password" name="text_password" type="password" onkeyup="password_change()"/>
</div>
<div class="login-form-buttons">
    <input type="submit" value="Login"/>
</div>

どんな助けでも大歓迎です。

下の画像を参照してください。css が入力ボックスのテキストとエラーの両方に適用され、そのすぐ下にエラーがない場合に入力テキストがデフォルトに戻っていることが示されています。要約すると、検証エラーの存在によって入力ボックスのテキストが影響を受けないようにしたいと思います。

ありがとう