jQueryの検証AJAXフォーム

Question

ResetPassword関数に検証を追加しようとしています。それは正常に動作していますが、私はvalidation.Canを追加した後にResetPassword関数が動作しないという別の問題があります。どうも。

HTMLコード：

<div class="PopUpBG"> 
    <div class="PopUp"> 
    <h3 class="modal-title"> 
     <span>Reset PAssword</span> 
    </h3> 
    <form id="form"> 

     <input type="email" name="ResetEmail" id="ResetEmail" placeholder="Email Adresse" required/> 

     <input type="submit" class="btn btn-success" value="Send" onclick="ResetPassword(this)"/> 

    </form> 
    </div> 

</div> 

ResetPasswordの&検証コード：

function ResetPassword(e) { 

    var email = $("#ResetEmail").val(); 

    if ($("#form").validate()) { 
    return true; 
    } else { 
    return false; 
    } 

    $(".PopUp").html("We have sent mail to you"); 

    $.ajax(
    { 
     type: "POST", 
     url: "/Account/loginRequestResetPassword", 
     dataType: "json", 
     data: { 
     Email: email, 
     }, 
     complete: function() { 
     console.log("send"); 
     $(".PopUpBG").fadeOut(); 
     } 
    }) 
} 

Answer 1

あなたが原因の使用にAJAX要求を送信する前に、あなたはは常に機能を終了しているので、問題がありますifステートメントの両方の条件のreturnステートメント。

検証が失敗した場合に機能を終了だけにあなたのロジックを変更し

：

function ResetPassword(e) { 
    if (!$("#form").validate()) 
    return false; 

    $.ajax({ 
    type: "POST", 
    url: "/Account/loginRequestResetPassword", 
    dataType: "json", 
    data: { 
     Email: $("#ResetEmail").val().trim(), 
    }, 
    success: function() { 
     console.log("send"); 
     $(".PopUp").html("We have sent mail to you"); 
     setTimeout(function() { 
     $(".PopUpBG").fadeOut(); 
     }, 10000); // fadeout the message after a few seconds 
    }, 
    error: function() { 
     console.log('something went wrong - debug it!'); 
    } 
    }) 
} 

はまた、私は唯一の後の要求が完了成功した電子メールメッセージを表示するロジックを修正したことに注意してください。現在のコードでは、機能が失敗する範囲がまだ残っていても、ユーザーに「電子メールで送信済み」というメッセージが表示されます。