只顯示第一個輸入錯誤點擊提交按鈕

我正在驗證任務，當我點擊提交按鈕時，表單爲空。我想只顯示第一個輸入錯誤信息。當我在第一個輸入中輸入輸入時，應該刪除錯誤消息以及紅色邊框。只顯示第一個輸入錯誤點擊提交按鈕

HTML：

<form class="memberLogin-form" method="post" action="" name="memLogin" id="memLoginForm" enctype="multipart/form-data"> 
    <h6>MEMBER LOGIN</h6> 
    <input type='text' name="email" id="email" placeholder="Company email" class="form-control email" /> 
    <span class="cstError">Enter your email</span><span id="cstEmailError">not a valid email</span> 
    <input type="password" placeholder="Password" name="psw" id="psw" class="form-control"> 
    <span class="cstError">Enter your password</span> 
    <button type="submit" class="form-control btn">Sign In</button> 
    <p> 
    </p> 
    <a href="cant-login">Can’t login</a> 
</form>

JavaScript的：

$(document).ready(function(){ 

$(".succesTxt").hide(); 
$('#cstEmailError').hide(); 
$("#memLoginForm").submit(function() { 
    var email = $("#email").val() 
    var pass = $("#psw").val(); 
    var atpos = email.indexOf("@"); 
    var dotpos = email.lastIndexOf("."); 
    if (email == "") { 
     $("#email").css("border", "solid 1px red"); 
     $("#email").next().show().css({ 
      "color": "red", 
      "padding": "10px 0 10px 0", 
      "display": "block" 
     }); 
     $('#cstEmailError').hide(); 
     return false; 
    } else { 
     $("#email").next().hide(); 
     $("#email").css("border", "none"); 
     $('#cstEmailError').hide(); 
     $(".cstError").hide() 
    } 

    if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) { 
     $('#cstEmailError').show(); 
     $(".cstError").hide() 
     return false; 
    } else { 
     $('#cstEmailError').hide(); 
     $(".cstError").hide() 
    } 
    if (pass == "") { 
     $("#psw").css("border", "solid 1px red"); 
     $(this).find(".cstError").show().css({ 
      "color": "red", 
      "padding": "10px 0 10px 0", 
      "display": "block" 
     }); 
     return false; 
    } else { 
     $("#psw").css("border", "none"); 
     $(".cstError").hide(); 
    } 
}) 

})

來源

2017-06-01 Ramu

我不明白你的'當我進入第一個輸入錯誤信息的輸入，以及紅色的邊框應該是removed'的意思。你在第一個輸入錯誤信息中輸入「輸入」？那是什麼意思？你能試着問清楚的問題嗎？ –

在第一次點擊它應該顯示錯誤信息後輸入電子郵件它應該隱藏 – Ramu

處理輸入的變化事件，你真的在做非常複雜的編碼使用單獨的CSS – Omi

用[的onkeyup = 「removevalidation（）」]中的電子郵件輸入字段中的onkeyup函數除去輸入的輸入值的驗證消息。

$(".succesTxt").hide(); 
 
$('#cstEmailError').hide(); 
 
$("#memLoginForm").submit(function() { 
 
    var email = $("#email").val() 
 
    var pass = $("#psw").val(); 
 
    var atpos = email.indexOf("@"); 
 
    var dotpos = email.lastIndexOf("."); 
 
    if (email == "") { 
 
     $("#email").css("border", "solid 1px red"); 
 
     $("#email").next().show().css({ 
 
      "color": "red", 
 
      "padding": "10px 0 10px 0", 
 
      "display": "block" 
 
     }); 
 
     $('#cstEmailError').hide(); 
 
     return false; 
 
    } else { 
 
     $("#email").next().hide(); 
 
     $("#email").css("border", "none"); 
 
     $('#cstEmailError').hide(); 
 
     $(".cstError").hide() 
 
    } 
 

 
    if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) { 
 
     $('#cstEmailError').show(); 
 
     $(".cstError").hide() 
 
     return false; 
 
    } else { 
 
     $('#cstEmailError').hide(); 
 
     $(".cstError").hide() 
 
    } 
 
    if (pass == "") { 
 
     $("#psw").css("border", "solid 1px red"); 
 
     $(this).find(".cstError").show().css({ 
 
      "color": "red", 
 
      "padding": "10px 0 10px 0", 
 
      "display": "block" 
 
     }); 
 
     return false; 
 
    } else { 
 
     $("#psw").css("border", "none"); 
 
     $(".cstError").hide(); 
 
    } 
 
}) 
 
function removevalidation(){ 
 
$('#cstEmailError').hide(); 
 
     $(".cstError").hide() 
 
     $("#email").css("border", "solid 1px"); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="memberLogin-form" method="post" action="" name="memLogin" id="memLoginForm" enctype="multipart/form-data"> 
 
    <h6>MEMBER LOGIN</h6> 
 
    <input onkeyup="removevalidation()" type='text' name="email" id="email" placeholder="Company email" class="form-control email" /> 
 
    <span class="cstError">Enter your email</span><span id="cstEmailError">not a valid email</span> 
 
    <input type="password" placeholder="Password" name="psw" id="psw" class="form-control"> 
 
    <span class="cstError">Enter your password</span> 
 
    <button type="submit" class="form-control btn">Sign In</button> 
 
    <p> 
 
    </p> 
 
    <a href="cant-login">Can’t login</a> 
 
</form>

來源

2017-06-01 18:08:22 Ashwin

只顯示第一個輸入錯誤點擊提交按鈕

回答

相關問題