TL; DR：

Question

当消息 first 出现时，使用jQuery Validation插件的平滑动画的错误消息非常容易。但是，在执行初始errorPlacement回调后，我不知道如何在用户不断更改输入时保持动画的动画。

在此示例中，如果/首次出现时，我正在扩展和淡化错误消息。之后，我想继续淡入和淡出错误消息，具体取决于它们是否有效。但是，只有默认功能，消息快速显示/消失（在视觉上不太吸引人）对我有用。

TL; DR：

我希望错误消息始终淡入淡出而不是闪烁。

HTML

<form id="contactForm" class="form-horizontal" autocomplete="off">
  <fieldset>
    <h4 style="margin-bottom: 20px; margin-top: 20px;" class="text-center">Contact us today for a free thing</h4>

    <div class="form-group">
      <span class="col-xs-offset-1 col-xs-1 text-center"><i class="fa fa-user bigicon" aria-hidden="true" title="Name"></i></span>
      <div class="col-xs-9">
        <input type="text" name="Name" placeholder="Name" class="form-control hps-text-box">
      </div>
    </div>

    <div class="form-group">
      <span class="col-xs-offset-1 col-xs-1 text-center"><i class="fa fa-envelope-o bigicon" title="Email address"></i></span>
      <div class="col-xs-9">
        <input type="text" name="Email" placeholder="Email address" class="form-control hps-text-box">
      </div>
    </div>

    <div class="form-group">
      <span class="col-xs-offset-1 col-xs-1 text-center"><i class="fa fa-phone-square bigicon" title="Phone number"></i></span>
      <div class="col-xs-9">
        <input type="text" placeholder="Phone number (eg. 123-456-7890)" class="form-control hps-text-box">
      </div>
    </div>

    <div class="form-group">
      <span class="col-xs-offset-1 col-xs-1 text-center"><i class="fa fa-pencil-square-o bigicon" title="Enter your message for us here."></i></span>
      <div class="col-xs-9">
        <textarea name="UserMessage" rows="7" placeholder="Enter your message for us here. We will get back to you within 2 business days." class="form-control hps-text-box"></textarea>
      </div>
    </div>

    <div class="form-group">
      <div class="col-md-12 text-center">
        <button id="submitButton" type="submit" class="btn btn-primary" autocomplete="off">Submit</button>
      </div>
    </div>
  </fieldset>
</form>

的JavaScript

$(document).ready(function() {
  $("#contactForm").validate({
    rules: {
      Name: "required",
      Email: {
        required: true,
        email: true
      },
      UserMessage: "required",
      Phone: {
        phoneUS: true
      }
    },
    messages: {
      Name: "Please provide your name",
      Email: "Please enter a valid email address",
      UserMessage: "Please enter a message"
    },
    errorElement: "div",
    errorClass: "jqval-error",
    errorPlacement: function(error, element) {
      error.insertAfter(element);
      error.slideDown(400);
      error.animate({ opacity: 1 }, { queue: false, duration: 700 });
    },
    submitHandler: function(form) {
      alert("Form submitted");
    }
  })
});

CSS

input,
select,
textarea {
  max-width: none;
}

.hps-text-box {
  margin-left: 10px;
}

.bigicon {
  font-size: 34px !important;
}

div.jqval-error {
  display: none;
  opacity: 0;
  margin-left: 18px;
  color: #f39200;
  font-weight: bold;
}

Answer 1

这不是一个微不足道的要求。你将不得不花费大量时间研究the docs并使用各种回调函数，例如errorPlacement，success等。另请参阅此答案以了解使用Tooltipster插件的类似行为：stackoverflow.com/a/14741689/594235

插件将验证消息设置为display: none，然后您才能获得控制权来操作它们。没有插件选项，回调，方法或挂钩，允许您在成功验证后执行某些操作，但也可以在删除消息并标记隐藏之前执行操作。

基本上，您需要重新创建一些功能＆amp; Tooltipster的方法，您可以在某处提取并保存消息文本，并在出错时自行处理。成功。

修改：

The showErrors callback将为您提供错误映射和错误列表，您可以在其中访问每个错误的文本及其相应的输入元素。注意：只需使用此回调，默认错误消息也将被抑制（适合您的目的）。还有一些努力，但也许这比重新发明轮子更容易。

为jQuery Validate设置错误消息的动画

TL; DR：

HTML

的JavaScript

CSS

1 个答案: