在香芹最小检查错误信息的特殊效果，Rails 4

Special effect on parsley min check error message, Rails 4

本文关键字：Rails 信息 错误 检查      更新时间：2023-09-26

我正在创建一个简单的应用程序注册，包括多个字段类型-字符串，文本，复选框等

我添加了欧芹来显示错误。效果很好。但是现在我想改变颜色的标题时，错误发生-特别是当欧芹最小检查触发它。

我代码:

<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");
    }   
 });

但是有些东西不像预期的那样工作。控制台没有显示任何错误信息。

提前感谢您的时间。

您正在检查.services-reg是否准备好了文档上的li.parsley-error。此时，您还没有执行任何验证。

你可以利用Parsley的事件，比如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演示，当表单正确验证时，我也使用parsley:form:success来删除红色。

UPDATE: 如果你有div组包含几个字段，你想改变正确的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");
});

在这里，我找到了正确的div基于jQuery元素的输入有一个错误。您可能需要根据表单的DOM对其进行调整。

看一下这个工作的jsfiddle

相关文章：