jquery - メール確認jquery

Question

私の目標は、ユーザーが自分の電子メールを入力して確認することです。両方が同じでない場合、フォームはエラーを表示します。

以下のコードは、ユーザーが

• 電子メール フィールドに「bla@stack.com」と入力します。
• 電子メールの確認フィールドに「bla@stack.com」と入力します。
• 電子メール フィールドに戻り、「bla@stack.com」を「azerty@stack.com」に変更します。
• 確認メール フィールドは変更しません。

エラーはありません。

jquery:

//Vérifie si l'email et sa répetition son identiques
$('#RepetitionEmail').keyup(function(){

    var RepetitionEmail = $('#RepetitionEmail').val();

    if($("#RepetitionEmail").val()!=$("#Email").val())
    {
        $('#RepetitionEmail').css('border-color','orange');
        $('.ErreurRepetitionEmail').text('Pas encore les mêmes ...');
        checkRepetitionEmail = "Repetition email pas identique";
    }else
    {
        $('#RepetitionEmail').css('border-color','#00ff00');
        $('.ErreurRepetitionEmail').text('... ça y est!');
        checkRepetitionEmail = "Repetition email ok";
    }
});

Answer 1

セレクターをこれに変更します

$('#RepetitionEmail, #Email').keyup(function(){

これで、両方の入力で keyUp イベントをリッスンします。

Answer 2

この答えが正しければ、コードを改善できます。まず、ユーザーがマウスのみを使用してテキストを貼り付けると、現在のコードは失敗します。次に、最適化できる冗長コードがあります。

同じ最終結果を達成するためのより良い方法を次に示します (新しい jQuery バージョンを使用していると仮定します)。

$("#MyForm").on("change", "#RepetitionEmail, #Email", function() {
    var tbEmail = $("#Email");
    var tbConfirmEmail = $("#RepetitionEmail");
    var email = tbEmail.val();
    var confirmEmail = tbConfirmEmail.val();
    if (email.length === 0 || confirmEmail.length === 0) {
        //user still did not fill up both.
        return;
    }

    var borderColor = "";
    var errorText = "";
    if(email !== confirmEmail)
    {
        borderColor = "orange";
        errorText = "Pas encore les mêmes ...";
        checkRepetitionEmail = "Repetition email pas identique";
    }else
    {
        borderColor = "#00ff00";
        errorText = "... ça y est!";
        checkRepetitionEmail = "Repetition email ok";
    }

    tbConfirmEmail.css('border-color', borderColor );
    $('.ErreurRepetitionEmail').text(errorText );
});

ライブ テスト ケース。

changeテキストがどのように変更されても機能するため、イベントの処理はより適切です。

検証するものがもっとある場合、またはより柔軟にしたい場合は、多数の jQuery 検証プラグインを調べてください。

Answer 3

$('#RepetitionEmail, #Email').keyup(function(){ // do something }