顯示使用jQuery驗證輸入字段時的相關消息

Question

我有兩個輸入字段，用戶名和密碼。我對每個空值執行基本檢查，如果其中任何一個爲空，則返回值爲false，因此$ ajax請求不會被執行。這樣可行。

我想請求幫助，以增強對空值的檢查，並返回false。

如果輸入電子郵件，但沒有密碼，那麼我得到密碼錯誤消息，並返回false，但如果然後我輸入密碼，沒有電子郵件，我然後得到輸入電子郵件錯誤，但密碼錯誤留在即使先前輸入的值未被刪除。這最終導致兩個消息都出現在頁面上，這是誤導性的。

在密碼，相同步驟的情況下也會發生同樣的情況。

在執行.ajax請求之前，確保輸入值並正確顯示相關消息對我的任務非常重要。

下面是我的腳本的副本。

我希望有人有時間給我一些幫助。

非常感謝。

<script type="text/javascript"> 

function ShoppingCartLogin() { 

    var userid = $(".YourOrder_MainLoginEmail").val(); 
    var password = $(".YourOrder_MainLoginPassword").val(); 
    var url = "/ShoppingCart/ShoppingCartLogin"; 

    if (userid == "") { 
     $('.YourOrder_loginError').css('visibility', 'visible'); 
     $('.YourOrder_loginError').text('Enter your e-mail address.'); 
     return false 
    } 

    if (password == "") { 
     $('.YourOrder_loginError_password').css('visibility', 'visible'); 
     $('.YourOrder_loginError_password').text('Enter your password.'); 
     return false 
    } 

    $.ajax({ 
     url: url, 
     type: "POST", 
     dataType: "json", 
     data: { userId: userid, pass: password },//{ userId: userid, pass: password }, 
     cache: false, 
     success: function (result) { 
      if (result.success == "Valid") { 
       // hide the login form and clear and hide error 
       $('.YourOrder_loginError').text(''); 
       $('.YourOrder_loginError').css('visibility', 'hidden'); 
       $('.YourOrder_loginForm').css('visibility', 'hidden'); 
       // show the shipping address section 
       $('.YourOrder_ShipAddress').css('visibility', 'visible'); 
       location.reload(); 
      } 
      if (result.error == "Invalid") { 
       // hide shipping address section 
       $('.YourOrder_ShipAddress').css('visibility', 'hidden'); 
       $('.YourOrder_loginError').css('visibility', 'visible'); 
       $('.YourOrder_loginError').text('The user name or password provided is incorrect.'); 

      } 
     } 
    }); 

} 

Answer 1

我將簡化腳本和驗證之前隱藏的所有消息。對於下面的HTML：

<form class="YourOrder_loginForm" method="post" action="https://"> 
    <p> 
     <input class="YourOrder_MainLoginEmail" type="email" placeholder="email" /> 
     <span class="msg_error YourOrder_loginError">Please enter your email.</span> 
    </p> 
    <p> 
     <input class="YourOrder_MainLoginPassword" type="password" placeholder="password" /> 
     <span class="msg_error YourOrder_loginError_password">Please enter your password.</span> 
    </p> 
    <p> 
     <input class="YourOrder_MainLoginEmail" type="submit" value="Login" /> 
     <span class="msg_error YourOrder_loginError_general">The user name or password provided is incorrect.</span> 
    </p> 
</form> 

這個CSS：

.YourOrder_loginForm { 
    position: relative; 
} 
.loading { 
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    width: 100%; 
    background: rgba(255, 255, 255, .5); 
    display: none; 
} 
.msg_error { 
    color: red; 
    display: none; 
} 

使用這個腳本：

function ShoppingCartLogin(e) { 

    var userid = $(".YourOrder_MainLoginEmail").val(); 
    var password = $(".YourOrder_MainLoginPassword").val(); 

    /* Hide all errors */ 
    $('.msg_error').hide(); 

    if (!userid) $('.YourOrder_loginError').show(); 
    if (!password) $('.YourOrder_loginError_password').show(); 
    if (!userid || !password) return false; 

    /* No errors, proceed */ 
    $('.loading').show(); 
    var url = "http://jsonplaceholder.typicode.com/users/1"; /* Use your url here */ 
    $.ajax({ 
     url: url, 
     type: "get", 
     /* You should use POST here */ 
     dataType: "json", 
     data: { 
      email: userid, 
      website: password 
     }, 
     cache: false, 
     success: function (result) { 
      if (result.success == "Valid") 
      /* No need to hide anything, you reload the page */ 
      location.reload(); 
      if (result.error == "Invalid") $('.YourOrder_loginError_general').show(); 
      $('.loading').hide(); 
     }, 
     error: function() { 
      $('.loading').hide(); 
     } 
    }); 
    /* Prevent form submition */ 
    return false; 
} 

$('.YourOrder_loginForm').on('submit', ShoppingCartLogin); 

Working example。