ruby​​ on rails客戶端驗證自定義樣式

Question

我爲我的rails項目使用client_side_validation gem，並且我試圖重新設置錯誤消息以適應標準基礎4樣式。我有正確應用了錯誤的造型，但我不能得到的消息被調換到模板

client_side_validations.rb

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

rails.validations.js

window.ClientSideValidations.formBuilders = { 
    'ActionView::Helpers::FormBuilder': { 
     add: function(element, settings, message) { 
     var form, inputErrorField, label, labelErrorField; 
     form = $(element[0].form); 
     if (element.data('valid') !== false && !(form.find("small.error[id='" + (element.attr('id')) + "']")[0] != null)) { 
      inputErrorField = jQuery(settings.input_tag); 
      labelErrorField = jQuery(settings.label_tag); 
      label = form.find("label[for='" + (element.attr('id')) + "']:not(.error)"); 
      if (element.attr('autofocus')) { 
      element.attr('autofocus', false); 
      } 
      element.before(inputErrorField); 
      inputErrorField.find('span#input_tag').replaceWith(element); 
      inputErrorField.find('label.error').attr('for', element.attr('id')); 
      labelErrorField.find('label.error').attr('for', element.attr('id')); 
      labelErrorField.insertAfter(label); 
      labelErrorField.find('label#label_tag').replaceWith(label); 
     } 
     return form.find("small.error[id='" + (element.attr('id')) + "']").text(message); 
     }, 
     remove: function(element, settings) { 
     var errorFieldClass, form, inputErrorField, label, labelErrorField; 
     form = $(element[0].form); 
     errorFieldClass = jQuery(settings.input_tag).attr('class'); 
     inputErrorField = element.closest("." + (errorFieldClass.replace(" ", "."))); 
     label = form.find("label[for='" + (element.attr('id')) + "']:not(.error)"); 
     labelErrorField = label.closest("." + errorFieldClass); 
     if (inputErrorField[0]) { 
      inputErrorField.find("#" + (element.attr('id'))).detach(); 
      inputErrorField.replaceWith(element); 
      label.detach(); 
      return labelErrorField.replaceWith(label); 
     } 
     } 
    } 
    }; 

Answer 1

改變後，一段代碼和所有似乎現在與基礎工作正常

window.ClientSideValidations.formBuilders = { 
'ActionView::Helpers::FormBuilder': { 
    add: function(element, settings, message) { 
    var form, inputErrorField, label, labelErrorField; 
    form = $(element[0].form); 
    if (element.data('valid') !== false && !(form.find("small.error[id='" + (element.attr('id')) + "']")[0] != null)) { 
     inputErrorField = jQuery(settings.input_tag); 
     labelErrorField = jQuery(settings.label_tag); 
     label = form.find("label[for='" + (element.attr('id')) + "']:not(.error)"); 
     if (element.attr('autofocus')) { 
     element.attr('autofocus', false); 
     } 
     element.before(inputErrorField); 
     inputErrorField.find('span#input_tag').replaceWith(element); 
     inputErrorField.find('small.error').attr('id', element.attr('id')); 
     labelErrorField.find('small.error').attr('id', element.attr('id')); 
     labelErrorField.insertAfter(label); 
     labelErrorField.find('label#label_tag').replaceWith(label); 
    } 
    return form.find("small.error[id='" + (element.attr('id')) + "']").text(message); 
    }, 
    remove: function(element, settings) { 
    var errorFieldClass, form, inputErrorField, label, labelErrorField; 
    form = $(element[0].form); 
    errorFieldClass = jQuery(settings.input_tag).attr('class'); 
    inputErrorField = element.closest("." + (errorFieldClass.replace(" ", "."))); 
    label = form.find("label[for='" + (element.attr('id')) + "']:not(.error)"); 
    labelErrorField = label.closest("." + errorFieldClass); 
    if (inputErrorField[0]) { 
     inputErrorField.find("#" + (element.attr('id'))).detach(); 
     inputErrorField.replaceWith(element); 
     label.detach(); 
     return labelErrorField.replaceWith(label); 
    } 
    } 
} 
    };