Jquery 为什么所有的验证都同时发生

这是jquery脚本。验证工作正常，但是如果您将一个字段留空，然后在表单上单击该字段，则表单中每个字段的所有验证消息都会显示，而不仅仅是空字段。如何以我的示例中的格式验证jquery中的电子邮件地址？有人有什么想法吗？提前谢谢你的帮助

$(document).ready(function() {
$('#firstname').on('blur', function() {
    if ($('#firstname').val() == '') {
        $('.errorMsg').show();
    } else {
        $('.errorMsg').hide();
    }
    });
     $('#lastname').on('blur', function() {
    if ($('#lastname').val() == '') {
        $('.errorMsg').show();
    } else {
        $('.errorMsg').hide();
    }
    });
     $('#email').on('blur', function() {
    if ($('#email').val() == '') {
        $('.errorMsg').show();
    } else {
        $('.errorMsg').hide();
    }
    });
    $('#roomtype').on('blur', function() {
    if ($('#roomtype').val() == '') {
        $('.errorMsg').show();
    } else {
        $('.errorMsg').hide();
    }
    });
});

---

因为您使用的是

$（'.errorMsg'）.show（）

将以name=

errorMsg

的所有类为目标

确保每次验证仅针对唯一的错误消息

使用

$（this.next（“.errorMsg”）.show（）

和

$（this）.next（“.errorMsg”）.hide（）用于每个输入

例如：

   if ($('#email').val() == '') {
        $(this).next(".errorMsg").show();
   } else {
        $(this).next(".errorMsg").hide();
   }

电子邮件验证示例：


$（'.errorMsg'）.hide（）；
$（'#email'）。关于（'blur'，函数（事件）{
if（event.target.checkValidity（））{
$（this.next（'.errorMsg'）.hide（）；
}否则{
$（this.next（'.errorMsg'）.show（）；
}
});

无效！！！！！！！！！！！
你的html是什么？名字表格中需要名字这是名字、姓氏、电子邮件和房间类型都是什么样子，只是id和标签相应地改变了。谢谢。你知道我如何给一个电子邮件地址添加正确的验证，这样它就需要使用正确的格式吗？@Smith不要关闭输入标记，有些标记是禁止关闭的：
img、input、br、hr、meta
，等等。@Smith
我有，但它仍然像文本字段一样进行验证。信在里面的时候，它就在里面valid@Smith看看这个