我的验证错误消息没有正确显示。例如我在名称输入上插入值但是显示了电子邮件的验证错误消息，或者当我在电话输入上插入值时，显示了电子邮件的验证。我希望当我在特定值中插入值时仅输入显示的验证错误消息。
<form class="contactForm" onsubmit="return validateContactForm();">
<div class="form-group">
<label for="name" class="label-login">Name</label>
<input type="text" class="form-control" id="name" autocomplete="off" />
<span id="namespan" class="text-danger"></span>
<i class="fa fa-user"></i>
</div>
<div class="form-group">
<label for="email" class="label-login">email</label>
<input type="email" class="form-control" id="email" autocomplete="off" />
<span id="emailspan" class="text-danger"></span>
<i class="fa fa-envelope"></i>
</div>
<div class="form-group">
<label for="phone" class="label-login">tell number </label>
<input type="text" class="form-control" id="phone" autocomplete="off" />
<span id="tellspan" class="text-danger"></span>
<i class="fa fa-phone"></i>
</div>
<div class="form-group">
<label for="message" class="label-login label-message">message</label>
<textarea class="form-control" rows="3" id="message" autocomplete="off"></textarea>
<span id="messagespan" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-send center-block" value="send/>
</div>
</form>
$(document).ready(function () {
$(".contactForm input,.contactForm textarea").each(function () {
$(this).keyup(function () {
var pt = /^[\w.]+@[a-z0-9-]+\.[a-z]{2,6}/i;
if (!pt.test($("#email").val())) {
$("#emailspan").html("insert email correctly");
}
else {
$("#emailspan").text("");
}
if ($("#name").val().length < 3) {
$("#namespan").html("insert name correctly");
}
else {
$("#namespan").text("");
}
if ($("#phone").val().length < 12) {
$("#tellspan").html("insert phone correctly");
}
else {
$("#tellspan").text("");
}
if ($("#message").val().trim().length < 3) {
$("#messagespan").html("insert message correctly");
}
else {
$("#messagespan").text("");
}
});
});
});
function validateContactForm() {
var bool = true;
var pt = /^[\w.]+@[a-z0-9-]+\.[a-z]{2,6}/i;
if (!pt.test($("#email").val())) {
bool = false;
$("#emailspan").html("insert email correctly");
}
if ($("#name").val().length < 3) {
bool = false;
$("#namespan").html("insert name correctly");
}
if ($("#phone").val().length < 12 ) {
bool = false;
$("#tellspan").html("insert tell correctly");
}
if ($("#message").val().trim().length < 3) {
bool = false;
$("#messageSpan").html("insert message correctly");
}
return bool;
}
答案 0 :(得分：0)
我在表单中发现了一些问题并在此处更新
表格发送按钮未正确关闭
.contactFormnot未在表单标记
$(document).ready(function () {
$(".contactForm input,.contactForm textarea").each(function () {
$(this).keyup(function () {
var pt = /^[\w.]+@[a-z0-9-]+\.[a-z]{2,6}/i;
if (!pt.test($("#email").val())) {
$("#emailspan").html("insert email correctly");
} else {
$("#emailspan").text("");
}
if ($("#name").val().length < 3) {
$("#namespan").html("insert name correctly");
} else {
$("#namespan").text("");
}
if ($("#phone").val().length < 12) {
$("#tellspan").html("insert phone correctly");
} else {
$("#tellspan").text("");
}
if ($("#message").val().trim().length < 3) {
$("#messagespan").html("insert message correctly");
} else {
$("#messagespan").text("");
}
});
});
});
function validateContactForm() {
var bool = true;
var pt = /^[\w.]+@[a-z0-9-]+\.[a-z]{2,6}/i;
if (!pt.test($("#email").val())) {
bool = false;
$("#emailspan").html("insert email correctly");
}
if ($("#name").val().length < 3) {
bool = false;
$("#namespan").html("insert name correctly");
}
if ($("#phone").val().length < 12) {
bool = false;
$("#tellspan").html("insert tell correctly");
}
if ($("#message").val().trim().length < 3) {
bool = false;
$("#messageSpan").html("insert message correctly");
}
return bool;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="contactForm" onsubmit="return validateContactForm();">
<div class="form-group">
<label for="name" class="label-login">Name</label>
<input type="text" class="form-control" id="name" autocomplete="off" />
<span id="namespan" class="text-danger"></span>
<i class="fa fa-user"></i>
</div>
<div class="form-group">
<label for="email" class="label-login">email</label>
<input type="email" class="form-control" id="email" autocomplete="off" />
<span id="emailspan" class="text-danger"></span>
<i class="fa fa-envelope"></i>
</div>
<div class="form-group">
<label for="phone" class="label-login">tell number </label>
<input type="text" class="form-control" id="phone" autocomplete="off" />
<span id="tellspan" class="text-danger"></span>
<i class="fa fa-phone"></i>
</div>
<div class="form-group">
<label for="message" class="label-login label-message">message</label>
<textarea class="form-control" rows="3" id="message" autocomplete="off"></textarea>
<span id="messagespan" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-send center-block" value="send" />
</div>
</form>
答案 1 :(得分：0)
您总是一起进行验证。因此，无论何时在任何字段上进行密钥更新，都会进行所有验证。 为避免这种情况，您可以至少以两种方式进行。
方式1
您可以检查触发事件的元素的ID，并仅验证该字段逻辑。您将保留一个独特的功能，为每个字段验证添加一个if
实施例
$(".contactForm input,.contactForm textarea").each(function () {
$(this).keyup(function () {
var pt = /^[\w.]+@[a-z0-9-]+\.[a-z]{2,6}/i;
var id=$(this).attr("id");
if(id==="email"){
if (!pt.test($("#email").val())) {
$("#emailspan").html("insert email correctly");
}
else {
$("#emailspan").text("");
}
}
...
等等。
方式2
或者，您可以为每个特定字段创建和处理函数，删除$(".contactForm input,.contactForm textarea").each(function () {。
实施例
$("#name").keyup(function () {
if ($(this).val().length < 3) {
$("#namespan").html("insert name correctly");
}
else {
$("#namespan").text("");
}
});
.....
等等