Ruby on rails bootstrap3+；简单形式+；客户端验证

我不确定这是不是一个合适的地方来分享我混合三种方式的方法，但我没有博客或git帐户，而且这个问题花了我两天的时间来解决，所以可能有人挂在那里。我想分享我的解决方案

1。简单表格

simple_form还不支持bootstrap 3，但有人已经解决了这个问题。您可以在以下链接中找到它：

2。查看

请记住，html代码的bootstrap3结构与bootstrap2不同。 基本上，句子的形式是：

=simple_form_for(resource,
                 wrapper: :bootstrap3_horizontal, //I'm using bootstrap3_horizontal layout. you can find it in the initializer. 
                 defaults: {right_column_html: {class: "col-lg-4 col-md-4"}, 
                            label_html: {class: "col-lg-3 col-md-3"} }

3。客户端验证

我安装了2个gems进行验证 -客户端验证 -客户端验证-简单表单

请注意，这两颗宝石不再保留。然而，我的应用程序走得太远，无法更改为另一种方法

如果仍要继续，请将资产复制到应用程序：

rails g client_side_validations:copy_assets

打开rails.validations.simple_form.js，将其更改为flowing：

(function() {

    ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
        add: function(element, settings, message) {
            return this.wrappers[settings.wrapper].add.call(this, element, settings, message);
        },
        remove: function(element, settings) {
            return this.wrappers[settings.wrapper].remove.call(this, element, settings);
        },
        wrappers: {
            //default wrapper is not changed.
            "default": { 
                add: function(element, settings, message) {
                    var errorElement, wrapper;
                    errorElement = element.parent().find("" + settings.error_tag + "." + settings.error_class);
                    wrapper = element.closest(settings.wrapper_tag);
                    if (!(errorElement[0] != null)) {
                        errorElement = $("<" + settings.error_tag + "/>", {
                            "class": settings.error_class,
                            text: message
                        });
                        wrapper.append(errorElement);
                    }
                    wrapper.addClass(settings.wrapper_error_class);
                    return errorElement.text(message);
                },
                remove: function(element, settings) {
                    var errorElement, wrapper;
                    wrapper = element.closest("" + settings.wrapper_tag + "." + settings.wrapper_error_class);
                    wrapper.removeClass(settings.wrapper_error_class);
                    errorElement = wrapper.find("" + settings.error_tag + "." + settings.error_class);
                    return errorElement.remove();
                }
            },
            // I'm using horizontal form layout, so the wrapper is bootstrap3_horizontal, which is in the initializer and view form.
            bootstrap3_horizontal: {  // changed
                add: function(element, settings, message) {
                    var errorElement, errorSpan, wrapper_class_element, wrapper_tag_element;
                    errorSpan = settings.error_tag+"[class=\'"+settings.error_class+"\']";  //changed
                    errorElement = element.parent().find(errorSpan);  //changed
                    if (!(errorElement[0] != null)) {
                        wrapper_tag_element = element.closest(settings.wrapper_tag);
                        errorElement = $("<"     + settings.error_tag + "/>", {
                            "class": settings.error_class,
                            text: message
                        });
                        wrapper_tag_element.append(errorElement);
                    }
                    wrapper_class_element = element.closest("." + settings.wrapper_class);
                    wrapper_class_element.addClass(settings.wrapper_error_class);
                    return errorElement.text(message);
                },
                remove: function(element, settings) {
                    var errorElement, errorSpan, wrapper_class_element, wrapper_tag_element;
                    wrapper_class_element = element.closest("." + settings.wrapper_class + "." + settings.wrapper_error_class);
                    wrapper_tag_element = element.closest(settings.wrapper_tag);
                    wrapper_class_element.removeClass(settings.wrapper_error_class);
                    errorSpan = settings.error_tag+"[class=\'"+settings.error_class+"\']";   //changed
                    errorElement = wrapper_tag_element.find(errorSpan);  //changed
                    return errorElement.remove();
                }
            }

        }
    };

}).call(this);

（函数（）{
ClientSideValidations.formBuilders['SimpleForm:：FormBuilder']={
添加：功能（元素、设置、消息）{
返回此.wrappers[settings.wrapper].add.call（此、元素、设置、消息）；
},
删除：功能（元素、设置）{
返回此.wrappers[settings.wrapper].remove.call（此，元素，设置）；
},
包装：{
//默认包装器未更改。
“默认值”：{
添加：功能（元素、设置、消息）{
var-errorElement，包装器；
errorElement=element.parent（）.find（“+settings.error\u tag+”+settings.error\u class）；
wrapper=element.closest（settings.wrapper\u标记）；
如果（！（errorElement[0]！=null））{
errorElement=$（“”{
“类”：settings.error\u类，
文本：消息
});
append（errorElement）；
}
addClass（settings.wrapper\u error\u class）；
返回errorElement.text（消息）；
},
删除：功能（元素、设置）{
var-errorElement，包装器；
wrapper=element.closest（“+settings.wrapper\u tag+”+“+settings.wrapper\u error\u class”）；
removeClass（settings.wrapper\u error\u class）；
errorElement=wrapper.find（“+settings.error\u tag+”+settings.error\u class）；
返回errorElement.remove（）；
}
},
//我使用的是水平表单布局，因此包装器是bootstrap3_horizontal，它位于初始值设定项和视图表单中。
bootstrap3_水平：{//已更改
添加：功能（元素、设置、消息）{
var errorElement、errorSpan、包装器类元素、包装器标记元素；
errorSpan=settings.error\u tag+“[class=\'”+settings.error\u class+“\']”；//已更改
errorElement=element.parent（）.find（errorSpan）；//已更改
如果（！（errorElement[0]！=null））{
wrapper\u tag\u element=element.closest（settings.wrapper\u tag）；
errorElement=$（“”{
“类”：settings.error\u类，
文本：消息
});
包装器\标记\元素.append（errorElement）；
}
包装器类元素=元素。最近（“.”+设置。包装器类）；
wrapper\u class\u元素.addClass（settings.wrapper\u error\u class）；
返回errorElement.text（消息）；
},
删除：功能（元素、设置）{
var errorElement、errorSpan、包装器类元素、包装器标记元素；
包装器类元素=元素.closest（“.”+settings.wrapper类+”+settings.wrapper类错误）；
wrapper\u tag\u element=element.closest（settings.wrapper\u tag）；
wrapper\u class\u元素.removeClass（settings.wrapper\u error\u class）；
errorSpan=settings.error\u tag+“[class=\'”+settings.error\u class+“\']”；//已更改
errorElement=wrapper_tag_element.find（errorSpan）；//已更改
返回errorElement.remove（）；
}
}
}
};
}).打电话（这个）；

您能告诉我您使用的Rails版本是什么吗？@R\G rails3 1.9.3上的版本必须是Ruby。运行命令“rails-v”查看rails版本。见鬼，我甚至看不到任何问题，更不用说解决方案了。你想要什么？

(function() {

    ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
        add: function(element, settings, message) {
            return this.wrappers[settings.wrapper].add.call(this, element, settings, message);
        },
        remove: function(element, settings) {
            return this.wrappers[settings.wrapper].remove.call(this, element, settings);
        },
        wrappers: {
            //default wrapper is not changed.
            "default": { 
                add: function(element, settings, message) {
                    var errorElement, wrapper;
                    errorElement = element.parent().find("" + settings.error_tag + "." + settings.error_class);
                    wrapper = element.closest(settings.wrapper_tag);
                    if (!(errorElement[0] != null)) {
                        errorElement = $("<" + settings.error_tag + "/>", {
                            "class": settings.error_class,
                            text: message
                        });
                        wrapper.append(errorElement);
                    }
                    wrapper.addClass(settings.wrapper_error_class);
                    return errorElement.text(message);
                },
                remove: function(element, settings) {
                    var errorElement, wrapper;
                    wrapper = element.closest("" + settings.wrapper_tag + "." + settings.wrapper_error_class);
                    wrapper.removeClass(settings.wrapper_error_class);
                    errorElement = wrapper.find("" + settings.error_tag + "." + settings.error_class);
                    return errorElement.remove();
                }
            },
            // I'm using horizontal form layout, so the wrapper is bootstrap3_horizontal, which is in the initializer and view form.
            bootstrap3_horizontal: {  // changed
                add: function(element, settings, message) {
                    var errorElement, errorSpan, wrapper_class_element, wrapper_tag_element;
                    errorSpan = settings.error_tag+"[class=\'"+settings.error_class+"\']";  //changed
                    errorElement = element.parent().find(errorSpan);  //changed
                    if (!(errorElement[0] != null)) {
                        wrapper_tag_element = element.closest(settings.wrapper_tag);
                        errorElement = $("<"     + settings.error_tag + "/>", {
                            "class": settings.error_class,
                            text: message
                        });
                        wrapper_tag_element.append(errorElement);
                    }
                    wrapper_class_element = element.closest("." + settings.wrapper_class);
                    wrapper_class_element.addClass(settings.wrapper_error_class);
                    return errorElement.text(message);
                },
                remove: function(element, settings) {
                    var errorElement, errorSpan, wrapper_class_element, wrapper_tag_element;
                    wrapper_class_element = element.closest("." + settings.wrapper_class + "." + settings.wrapper_error_class);
                    wrapper_tag_element = element.closest(settings.wrapper_tag);
                    wrapper_class_element.removeClass(settings.wrapper_error_class);
                    errorSpan = settings.error_tag+"[class=\'"+settings.error_class+"\']";   //changed
                    errorElement = wrapper_tag_element.find(errorSpan);  //changed
                    return errorElement.remove();
                }
            }

        }
    };

}).call(this);