为什么所有验证都在同一时间进行

This is the jquery script. The validation works, however if you leave one field blank and then click off the field onto the form, all the validation messages show up for each field in the form, not just the field that is empty. And how do you validate an email address in jquery in the format that is in my example? Anyone any ideas? Thanks for any help in advance

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

1 个解决方案

#1

because you are using $('.errorMsg').show(); which will target all classes with name = errorMsg.

因为你正在使用$('。errorMsg')。show();它将使用name = errorMsg定位所有类。

make sure each validation only target the unique error message

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

Use $(this).next(".errorMsg").show(); and $(this).next(".errorMsg").hide(); for each input

使用$(this).next(“。errorMsg”)。show();和$(this).next(“。errorMsg”)。hide();对于每个输入

example:

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

Example for email validation:

电子邮件验证示例:

$('.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>

1 个解决方案

#1

更多相关文章

随机推荐