对 parsley 最小检查错误消息的特殊效果，Rails 4

Question

我正在创建简单的注册应用程序，它由多种字段类型组成 - 字符串、文本、check-boxes 等

我添加了 parsley 以显示错误（如果有）。效果很好。但是现在我想在发生错误时更改标题的颜色 - 特别是当 parsley-min-check 触发它时。

我的代码：

<div class="col-lg-3"> 
    Services
    <hr>          
  <div class="services-heading">  (Minimum*3)  </div>

    <div class="services-reg">

     <% @services.each do |service| %>
       <li>

            <%= check_box_tag 'service_ids[]', service.id, false, :'data-parsley-mincheck'=>3,:required => true%>
         <%= h service.name%>                       
       </li>               


     <% end %>
   </div>

 </div>

现在我正尝试在需要时触发脚本 div (services-reg) 包含欧芹错误消息。

 $(document).ready(function() {
    if ( $( ".services-reg  > li.parsley-error").length ) {

        $(".services-heading > p").css("color", "red");
    }   
 });

但有些东西没有按预期工作。控制台不显示任何错误消息。

提前感谢您的宝贵时间。

Answer 1

您正在检查 .services-reg 是否已准备好文档中的 li.parsley-error。那一刻，您还没有执行任何验证。

你或许可以利用Parsley's events，比如parsley:form:error。因此，您可以收听该事件，该事件在出现验证错误时触发。

$(document).ready(function() {
    // when there's a validation error
    $.listen('parsley:form:error', function(ParsleyForm) {
        $(".services-heading > p").css("color", "red");
    });
});

检查此 jsfiddle demo，我还使用 parsley:form:success 在正确验证表单时删除红色。

更新：如果您的 divs 组包含几个字段并且您想要更改正确 div 的颜色，您可以使用事件 parsley:field:error 和 parsley:field:success.

示例：

$.listen('parsley:field:error', function(ParsleyField) {
    var pElement = ParsleyField.$element.parent('div').prev().find('p');
    pElement.css("color", "red");
});

这里我根据 jQuery 元素为有错误的输入找到正确的 div。您可能需要根据表单的 DOM 进行调整。

看看这个working jsfiddle。

对 parsley 最小检查错误消息的特殊效果，Rails 4

Special effect on parsley min check error message, Rails 4

javascript

ruby-on-rails

parsley.js