Question

当表单为空时单击提交按钮时，我正在处理验证任务。我想只显示第一个输入错误消息。当我在第一个输入中输入输入时，应删除错误消息以及红色边框。

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

使用[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>

单击“提交”按钮时仅显示第一个输入错误

1 个答案: