JQuery Validation 不显示正确的消息答案

【问题标题】：JQuery Validation does not show the right messageJQuery Validation 不显示正确的消息
【发布时间】：2018-06-14 03:35:06
【问题描述】：

我正在使用 JQuery 验证插件来验证邮件地址。

    rules: {
        mail_person: {
            required: true,
            email: true
        }
    },
    messages: {
        mail_person: {
            required: "Mail required",
            email: "Mail invalid"
        }
    },

问题是：如果输入为空，点击提交按钮，报错信息为“需要输入”。当我开始在邮件输入字段中输入内容时，该消息应更改为“无效邮件”，但事实并非如此。

反之亦然：如果输入无效并且点击了提交按钮，则会出现正确的消息“输入无效”，但在删除输入时不会变为“需要输入”。

这是plunker

【问题讨论】：

标签： javascript jquery validation email jquery-validate

【解决方案1】：

试试这个代码

        <!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@*" data-semver="4.0.0-alpha.3" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" />
    <script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script data-require="jquery-validation@1.12.0" data-semver="1.12.0" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>
    <script data-require="jquery-validation@1.12.0" data-semver="1.12.0" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/additional-methods.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script>

    $(document).ready(function() {
    $("#signupForm1").validate({
    rules: {
        mail_person: {
           required: true,
           email: true,

        }
    },
    messages: {
        mail_person: {
           required: "Mail required",
        email: "Mail invalid"

        }
    },
    errorElement: "div",
    errorLabelContainer: '.errorTxt',
    errorPlacement: function(error, element) {
        // Add the red unterline to the error element
          /*  $(element).parent().addClass("validation-error")
            // Add the alert
           if (!element.parent().next().hasClass('alert alert-danger')) {
            $('<div class="alert alert-danger" role="alert" style="height: 20px;"> <p class="text-center validation-error-message">' + error.text() + '</p></div>').insertAfter(element.parent());
        }*/
    },
    success: function(label, element) {
        // Remove the error
           /* if ($(element).parent().hasClass('validation-error')) {
            $(element).parent().removeClass("validation-error");
            $(element).parent().next().detach();
        }*/
    },
    });
});

  </script>
  </head>
  <body>
    <form id="signupForm1" role="form" method="post">
      <div class="container">
    <div class="input-group gap-bottom">
      <span class="input-group-addon col-lg-5 col-md-6 col-sm-8 col-6" id="basic-addon3">
        <small>mail</small>
      </span>
      <input class="form-control" id="mail_person" name="mail_person" aria-describedby="basic-addon3w" type="text" data-msg="Please enter your first name"/>
    </div>
     <div class="errorTxt alert alert-danger" style="display:none;height: 20px;"></div>
      </div>
      <input id="submitBtn" name="submitBtn" value="click" class="btn btn-warning center btn-block" type="submit" />
    </form>
  </body>

</html>

这是plunkr

【讨论】：

谢谢。那行得通。但是没有解决方案，我可以在哪里使用errorPlacement？很想将样式和类用于我已经创建的错误。

【解决方案2】：

验证设置为在字段提交时进行，因此消息将在按下提交时更改。您还可以通过在更改时准确验证该字段来更改该行为，将其添加到您的代码中：

 $("#signupForm1").validate().element(':input[name="mail_person"]');

这将在您每次更改（修改）该字段时重新进行验证。更好的是让它模糊而不是改变。

 $('input[name="mail_person"]').on('blur', function(){
    $("#signupForm1").validate().element(':input[name="mail_person"]');
 });

因此，每当您离开该字段时，您都会对该字段进行验证。如果您的表单，您还可以扩展它以支持所有字段。

【讨论】：

我真的很感兴趣谁投了反对票，为什么，请告诉我们你的意见！