Show only first input error when click on submit button

Question

I am working on validation task when I click on submit button when form is empty. I want to show only first input error message. When I enter input in the first input, error message as well as red border should be removed.

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();
    }
})

})

Answer 1

Use [onkeyup="removevalidation()"] a onkeyup function in email input field to remove the validation message on entering input value.

 $(".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>