有没有人使用过带有 Chosen.js 下拉菜单的 client_side_validations gem？答案

【问题标题】：Has any one used client_side_validations gem with Chosen.js dropdown?有没有人使用过带有 Chosen.js 下拉菜单的 client_side_validations gem？
【发布时间】：2012-06-08 16:06:05
【问题描述】：

我正在使用 selected.js (http://harvesthq.github.com/chosen/)。我想知道是否有人能够同时使用选定的选择框和 client_side_validations。

问题是，当我们使用 selected 时，它会隐藏原始 select 元素并呈现自己的下拉菜单，当我们关注时不会调用验证，并且当显示验证消息时，它会与原始 select 一起显示元素，因此错误的定位也不正确。

什么是处理这个问题的好方法，我们可以更改ActionView::Base.field_error_proc 中的一些代码，目前看起来像

 ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
   unless html_tag =~ /^<label/
     %{<div class="field_with_errors">#{html_tag}<label for="#{instance.send(:tag_id)}" class="message">#{instance.error_message.first}</label></div>}.html_safe
   else
     %{<div class="field_with_errors">#{html_tag}</div>}.html_safe
   end
 end

有什么想法吗？

编辑 1：

我现在有以下解决方案。

将“chzn-dropdown”类应用到我所有由 selected 显示的选择
使用了 client_side_validations Gem 提供的以下回调

clientSideValidations.callbacks.element.fail = function(element, message, callback) {

  if (element.data('valid') !== false) {

    if(element.hasClass('dropdown')){

      chzn_element = $('#'+element.attr('id')+'_chzn');

      console.log(chzn_element);

      chzn_element.append("<label class='message-chzn'>"+message+"</label>");
  }
  else{
    callback();
  }
  }
}

【问题讨论】：

你在哪里添加回调到你的应用程序？

标签： ruby-on-rails client-side-validation jquery-chosen

【解决方案1】：

在所选择的选择更改时，验证的验证无法运行，您可以尝试这个：

selectbox.change(function() { setTimeout(function() { selectbox.focusout() }) });

我仍在寻找有关验证消息定位的解决方案，因为我真的很想避免篡改客户端验证 javascript。

编辑：

这似乎是一个很好的解决方案，为了更接近客户端验证 api，我想出了以下内容（它可能关注的对象）：

var settings = {
    type: 'ActionView::Helpers::FormBuilder',
    input_tag: '<div class="field_with_errors"><span id="input_tag" /><label class="message validationError" /></div>'
};

clientSideValidations.callbacks.element.fail = function (element, message, addError) {
    if ($(element).data('chosen') != null) {
        var chosen = $('#' + element.attr('id') + '_chzn');

        clientSideValidations.formBuilders[settings.type].add(chosen, settings, message);

        // Point the label back to the select box
        $('label[for="' + chosen.attr('id') + '"]').attr('for', element.attr('id'));

        // Mark it as invalid
        chosen.data('valid', false);
    } else {
        addError(element, message);
    }
};

clientSideValidations.callbacks.element.pass = function (element, removeError) {
    if (element.data('chosen') != null) {
        var chosen = $('#' + element.attr('id') + '_chzn');

        clientSideValidations.formBuilders[settings.type].remove(chosen, settings);

        // Un-mark it from invalid
        chosen.data('valid', null);
    } else {
        removeError(element);
    }
};

请注意，我使用数据属性 (data-chosen) 来初始化选择框。同样对于一个标签点击打开选择工作，我明确地打开标签点击列表框：

// element is the select box

// Delegate click event from related labels to element (this is already done on "good" browsers)
$('label[for="' + element.attr('id') + '"]').click(function() { element.click() });

// Delegate click event on original element and any related labels to open the list
$(element).click(function() { setTimeout(function() { element.trigger('liszt:open'); }, 0); });

【讨论】：

【解决方案2】：

  clientSideValidations.callbacks.element.fail = function(element, message, callback){
    if(element.data("valid") !== false) {
      callback();
      if(element.is("select") && $("#" + element.attr("id") + "_chzn").length > 0){
        element.parent().prepend($("#" + element.attr("id") + "_chzn"));
      }
    }
  }

【讨论】：

【解决方案3】：

试试这个：

告诉 gem 你想要验证选择标签：

ClientSideValidations.selectors.inputs += ', select';

当 Chosen 的 Dropbox 更改时强制验证：

$('#form_field').chosen().change(function(e) {
  var settings = window.ClientSideValidations.forms[this.form.id];
  $(this).isValid(settings.validators);
});

由于 Chosen 隐藏了该字段，您需要在视图中明确启用该字段的验证：

<%= form_for ..., :validate => true do |f| %>
...
  <%= f.validate :form_field %>
...
<% end %>

【讨论】：