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

Question

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

Answer 1

因为您使用的是 $('.errorMsg').show();，它将针对名称 = errorMsg 的所有类。

确保每个验证只针对唯一的错误消息

对每个输入使用$(this).next(".errorMsg").show(); 和$(this).next(".errorMsg").hide();

示例：

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

电子邮件验证示例：

$('.errorMsg').hide();

$('#email').on('blur', function(event) {
  if (event.target.checkValidity()){
    $(this).next('.errorMsg').hide();
  } else {
    $(this).next('.errorMsg').show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="myform">
  <input id="email" type="email" placeholder="your email">
  <span class="errorMsg">Not Valid!!!!!!!!!!!</span>
</form>