JQuery 验证未显示正确的消息

Question

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

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

问题是：如果输入为空并单击提交按钮，则错误消息为"input is requiered"。当我开始在邮件输入字段中键入内容时，消息应更改为 "invalid mail"，但事实并非如此。

反之亦然：如果输入无效并单击提交按钮，则会出现正确的消息 "input invalid"，但在删除输入时不会更改为 "input is required"。

这是一个plunker

Answer 1

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

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

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

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

因此，无论何时您离开该字段，您都会对该字段完成验证。如果您的表单，您还可以扩展它以支持所有字段。

Answer 2

试试这个代码

        <!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

JQuery 验证未显示正确的消息

JQuery Validation does not show the right message

javascript

email

validation

jquery

jquery-validate