3

簡単なログインフォームがあり、表示するエラーが発生したときにフィールドラベルの置き換えをjQueryで検証します。問題は、エラーがクリアされると、ラベルが消えることです。以前のラベルのコンテンツに戻す方法、またはフィールドが有効なときにそのラベルを再構築する方法を見つけたいです...

これが私のコードです：

$(document).ready(function(){
    $("#login").validate({
        errorPlacement: function(error, element) {
            element.prev().replaceWith(error);
        },
        rules: {
            "email": {
                required: true,
                email:true,
            },
            "password": {
                required: true,
                minlength: 6
            }
        },
        messages: {
            email: {
                required: "Please enter your email address.",
                email: "Please enter a <u>valid</u> email address"
            },
            password: {
                required: "Please enter your password.",
                minlength: "Please enter a password with 6 characters or more."
            }
        },
    });
});

そしてHTML：

<form name="login" id="login" method="post" action="authenticate.php">
<p>
    <label for="email">Email Address:</label>
    <input type="text" name="email" id="email" class="required email" />
</p>
<p>
    <label for="password">Password:</label>
    <input type="password" name="password" id="password" class="required" />
</p>
<p>
    <input type="submit" value="Log In" id="submit" />
</p>

基本的に、ユーザーがフォームを送信するときに、[電子メール]フィールドにデータがない場合、電子メールのラベルはエラーに置き換えられます。しかし、有効な入力ができたら、元のラベルを元に戻したいと思います。

提案を事前に感謝します、

Z

4

3 に答える 3

3

私は実際に、前のラベルをエラー ラベルに置き換える代わりに、error.appendTo(element.prev()) と errorElement: "span" を使用してそのラベルにスパンを追加するという妥協案を見つけました。新しいコードは次のとおりです。

            $(document).ready(function(){
            $("#login").validate({
                errorElement: "span",
                errorPlacement: function(error, element) {
                    error.appendTo(element.prev());
                    //element.prev().replaceWith(error);
                },
                rules: {
                    "email": {
                        required: true,
                        email:true,
                    },
                    "password": {
                        required: true,
                        minlength: 6
                    }
                },
                messages: {
                    email: {
                        required: " is Required",
                        email: " is Improperly Formatted"
                    },
                    password: {
                        required: " is Required",
                        minlength: " is not Long Enough"
                    }
                },
            });
        });

理想的とは言えませんが、少なくともスパンが表示されたときはエラー コードが表示され、エラー コードが表示されなくなってもラベルはそのまま残ります。ラベルとエラーが文章のように補完し合うようにしただけです。または「メールアドレス」「の形式が正しくありません。」

ここに貢献してくれたすべての人に感謝します。

Z

于 2012-06-19T17:25:28.020 に答える
1

削除できます

errorPlacement: function(error, element) {
         element.prev().replaceWith(error);
     },

メッセージは代わりにテキストボックスの横に表示されます。

于 2012-06-19T02:45:04.627 に答える
0

エラーが発生した場合は、削除するChild（ラベル）を試して、新しいものを添付してください。ラベルの切り替えは理にかなっているようです

于 2012-06-19T02:38:04.813 に答える