Question

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

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

问题是：如果输入为空并且单击了提交按钮，则错误消息为＆＃34;输入是必需的＆＃34;。当我开始输入邮件输入字段时，邮件应更改为＆＃34;无效邮件＆＃34;但它没有。

反过来说：如果输入无效并且单击了提交按钮，则输入无效的正确消息＆＃34;发生，但不会改变为＆＃34;输入是必需的＆＃34;输入被删除时。

这是plunker

Answer 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

Answer 2

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

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

每次更改（修改）字段时，这将重做验证。更好的方法是让它变得模糊而不是变化。

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

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

JQuery Validation没有显示正确的消息

2 个答案: