0

http://bassistance.de/jquery-plugins/jquery-plugin-validation/を使用して、ユーザーが既存の設定を変更できるフォームを検証しています。フォームには、パスワード用のフィールドとパスワードを確認するためのフィールドがあります。パスワードを変更しないようにするには、ユーザーに空白のままにするように指示します（おそらく、これを行うためのより直感的な方法ですか？）。[パスワードの確認]フィールドは、ユーザーがパスワードを変更した場合にのみ表示されます。

それはかなりうまく機能しますが、2つの問題があります。まず、パスワードフィールドに何かを入力してTabキーを押すと、パスワードの確認フィールドに移動せず、その後の次のフィールドに移動します。次に、パスワードフィールドに何かを入力してEnterキーを押すと、パスワードの確認がチェックされる前にフォームが送信されます。何らかの理由で、この2番目の欠陥はjsfiddleデモhttp://jsfiddle.net/4htKu/2/を使用しても現れませんが、2番目の同一のデモhttp://tapmeister.com/test/validatePassword.htmlでは現れます。以下のコードは、前述の2つのデモと同じです。問題はconfirm_passwordパスワードが非表示になっていることに関連していると思いますが、確かではありません。これらの2つの問題を解決するには、何をする必要がありますか？ありがとうございました

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>jQuery validation plug-in - main demo</title>

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

        <script type="text/javascript">
            $(function() {

                $("#confirm_password").parent().hide();
                $("#password").val('').
                blur(function() {
                    $t=$(this);
                    if($.trim($t.val())!="" && !$t.hasClass('error')) {$("#confirm_password").parent().show();}
                    else if($.trim($t.val())=="") {$("#confirm_password").val('').parent().hide();}
                });

                // validate signup form on keyup and submit
                $("#signupForm").validate({
                    rules: {
                        firstname: {required: true,minlength: 2},
                        lastname: {required: true,minlength: 2},
                        username: {required: true,minlength: 2},
                        password: {required: true,minlength: 2},
                        confirm_password: {required: true,minlength: 2, equalTo: "#password"}
                    },
                    messages: {},
                    submitHandler: function(form) {alert("submitted");}
                });

            });
        </script>

    </head>
    <body>

        <form class="cmxform" id="signupForm" method="get" action="">
            <fieldset>
                <legend>Validating a complete form</legend>
                <p>
                    <label for="firstname">Firstname*</label>
                    <input id="firstname" name="firstname" />
                </p>
                <p>
                    <label for="lastname">Lastname*</label>
                    <input id="lastname" name="lastname" />
                </p>
                <p>
                    <label for="username">Username*</label>
                    <input id="username" name="username" />
                </p>
                <p>
                    <label for="password">Password (Leave blank to remain unchanged)</label>
                    <input id="password" name="password" type="password" />
                </p>
                <p>
                    <label for="confirm_password">Confirm password</label>
                    <input id="confirm_password" name="confirm_password" type="password" />
                </p>
                <p>
                    <label for="other">Other Non-required</label>
                    <input id="other" name="other" />
                </p>
                <p>
                    <input class="submit" type="submit" value="Submit" />
                </p>
            </fieldset>
        </form>

    </body>
</html>
4

2 に答える 2

3

を使用する代わりに、と aを.blur使用して、値が空白かどうかを検出します。空白でない場合は表示し、そうでない場合は非表示にします。.keydownsettimeout

$("#password").keydown(function() {
    var self = this, $self = $(this);
    setTimeout(function(){
        if ( $.trim(self.value) != "" && !$self.is(".error") ) {
            $("#confirm_password").parent().show();
            return;
        }
        $("#confirm_password").val('').parent().hide();
    },0);
});

Enter キーを押す限り、それが本来の機能ではないでしょうか。フォームを送信しますか?

.blurusingが機能しない理由は、隠しフィールドが表示される前に次のフィールドにタブ移動しているためです。このコードはその問題を修正します。

于 2013-01-02T16:05:59.690 に答える
0

チェックボックスを使用してパスワードを変更するかどうかをユーザーに尋ねてみませんか? チェックされている場合はパスワード フィールドを表示し、チェックされていない場合はフォームの送信を許可します。

追加の HTML:

<p>
    <label for="passwordChangeYes">Check if you want to change your password</label>
    <input type="checkbox" name="passwordChangeYes" id="passwordChangeYes" value="Yes" />
</p>

追加の JS:

$("#password").hide();
$('#passwordChangeYes').one("click", function () {
    if ($('#passwordChangeYes').is(':checked')) {
            $("#password").fadeIn(400);
        }
    });

チェックボックスのクリック時に検証部分から必要な部分を削除または追加する方法がわかりません。しかし、これが出発点ではないでしょうか。

于 2013-01-07T19:11:56.813 に答える