[英]Show only first input error when click on submit button
我在表单为空时单击“提交”按钮时正在执行验证任务。 我只想显示第一个输入错误消息。 当我在第一个输入中输入输入时,应删除错误消息以及红色边框。
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();
}
})
})
在电子邮件输入字段中使用onkeyup函数[onkeyup =“ removevalidation()”]在输入输入值时删除验证消息。
$(".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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.