3

新しいパスワードが一致したときに自動的にユーザーに通知するスクリプト(アカウントのアクティブ化)がありますが、送信ボタンも有効にする方法を見つける必要があります。

これが私のコードです:

JS:

function checkPasswordMatch() {
    var password = $("#new_password").val();
    var confirmPassword = $("#new_password2").val();

    if (password != confirmPassword) $("#divCheckPasswordMatch").html("<font color=\"red\"><b>Check Passwords</b></font>");
    else $("#divCheckPasswordMatch").html("<font color=\"green\"><b>Passwords Match</b></font>");
}

$(document).ready(function() {
    $("#txtConfirmPassword").keyup(checkPasswordMatch);
});​

HTML

<table>
    <form action="activate_account.php" method="post">
        <tr>
            <td align="right">
                <label for="new_password">Password (6-12 chars):</label>
            </td>
            <td>
                <input type="password" name="new_password" id="new_password" />
            </td>
        </tr>
        <tr>
            <td align="right">
                <label for="new_password2">Again:</label>
            </td>
            <td>
                <input type="password" name="new_password2" id="new_password2" onkeyup="checkPasswordMatch();"
                />
            </td>
        </tr>
        <tr>
            <td>
                <td>
                    <div class="registrationFormAlert" id="divCheckPasswordMatch"></div>
                </td>
                <td>
                    <div id="submit">
                        <input type="submit" value="Activate Account" disabled="disabled" />
                    </div>
                </td>
        </tr>
</table>
4

4 に答える 4

2

これを行う必要があります:

$("#buttonActivate").prop("disabled", false);  // to enable the button

その後、ユーザーがパスワードを再度変更することを決定した場合は、このコードを使用することを忘れないでください。そうすると、ボタンが再び非アクティブになります。

 $("#buttonActivate").prop("disabled", true); // to disablethe button

現在のコードをこれに置き換えるだけですが、HTMLも更新することを忘れないでください

jQuery

$(document).ready(function() {
function checkPasswordMatch() {
    var password = $("#new_password").val();
    var confirmPassword = $("#new_password2").val();

    if (password != confirmPassword) {
        $("#new_password").css("background", "red");
        $("#new_password2").css("background", "red");
        $("#buttonActivate").prop("disabled", true);
        return false;
    } else {
        $("#new_password").css("background", "green");
        $("#new_password2").css("background", "green");
        $("#buttonActivate").prop("disabled", false);
        return true;
    }
}
  $("input").keydown(function() {
    var password = $("#new_password").val();
    var confirmPassword = $("#new_password2").val();
    if (password.length >= 6 && confirmPassword.length >= 6) {  // let's check if the password is >= 6 otherwise there is nothing to check
        checkPasswordMatch();
    }
});

以下の例で更新されたHTMLを参照してください。

  1. IDをあなたの<form>に設定しますid="accountActivation"
  2. inputボタンをに変更buttonし、IDも設定します。
    <button id="buttonActivate" type="submit" disabled="disabled">Activate Account</button>

jsFiddleの実例

Passwords mismatch警告を表示するようにjsFiddleを更新しました

私はそれがあなたのために正しく働くと信じています!

于 2012-08-28T21:07:21.420 に答える
0

PoXの回答に追加するには、jQuery 1.6以降を使用している場合は、有効状態と無効状態prop()を設定する方法を使用する必要があります。

$("input[type=submit]").prop("disabled", false);
于 2012-08-28T21:07:11.237 に答える
0

属性の変更をお探しだと思います

$("input[type=submit]").removeAttr("disabled");  

ここで.removeAttrを参照してください

于 2012-08-28T21:00:40.557 に答える
0

送信ボタンにIDを付けます。

<input id="activateAccountButton" type="submit" value="Activate Account" disabled="disabled" />

次に、パスワードチェック機能に以下を追加します。

function checkPasswordMatch() {
    var password = $("#new_password").val();
    var confirmPassword = $("#new_password2").val();

    if (password != confirmPassword)
        $("#acivateAccountButton").attr("disabled","disabled");
        $("#divCheckPasswordMatch").html("<font color=\"red\"><b>Check Passwords</b></font>");
    else
        $("#acivateAccountButton").removeAttr("disabled"); 
        $("#divCheckPasswordMatch").html("<font color=\"green\"><b>Passwords Match</b></font>");

}

また、サーバー側で検証を行っていることを確認してください!!!

于 2012-08-28T21:03:44.013 に答える