0

在我的 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，并且在没有错误的情况下，直接在下方输入文本恢复为默认值。总而言之，我希望输入框文本不受验证错误的影响。

在此处输入图像描述

谢谢

4

0 回答 0