ruby ​​on rails 클라이언트 측 유효성 검사 커스텀 스타일

Question

나는 내 레일 프로젝트에 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); 
    } 
    } 
} 
    };