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

})

I can't understand what you mean by when i enter input in the first input error message as well as red border should be removed. You enter "input" in the first input error message?? What does that mean? Can you try to ask clear questions please? — Jeremy Thille
in the first click it should show error message after enter email it should hide — Ramu
handle the change event on input, you are really doing very complex coding use separate css — Omi

Ashwin Ashwin · Accepted Answer · 2017-06-01T18:08:22

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>

Show only first input error when click on submit button

1 Answers