使用clientsidevalidations

#gemfile
gem 'jquery-rails'
gem 'client-side-validations'

#安装
rails g client_side_validations:install  #生成initializers/client_side_validations.rb文件
rails g client_side_validations:copy_assets #生成rails.validations.js文件

#更新application.js，添加如下代码
//= require jquery
//= require jquery_ujs
//= require rails.validations
window.ClientSideValidations.callbacks.element.fail = function(element, message, callback) {
    $('.submit').prop("disabled",true);
    callback();
};

window.ClientSideValidations.callbacks.element.pass = function(element, callback) {
    $('.submit').prop("disabled",false);
    callback();
};

#更新rails.validations.js,添加如下代码
  $(document).bind((window.Turbolinks ? 'turbolinks:load' : 'ready'), function() {
    ClientSideValidations.disableValidators();
    return $(ClientSideValidations.selectors.forms).validate();
  });

#更新config/initializers/client_side_validations.rb,去除下面代码之前的注释
ActionView::Base.field_error_proc = proc do |html_tag, instance|
  if html_tag =~ /^<label/
    %(<div class="field_with_errors">#{html_tag}</div>).html_safe
  else
    %(<div class="field_with_errors">#{html_tag}<label for="#{instance.send(:tag_id)}" class="message">
    #{instance.error_message.first}</label></div>).html_safe
  end
end

#model中使用validates方法
class < ApplicationRecord
  validates :name, presence: { message: "名字不能为空！" }
end


#更新view文件
<%= form_for @user, validate: true do |form| %>
...
<% end %>

结合使用simpleform和clientsidevalidations

#gemfile
gem 'jquery-rails'
gem 'simple_form'
gem 'client_side_validations'
gem 'client_side_validations-simple_form'

#安装
rails g client_side_validations:install  
rails g client_side_validations:copy_assets
rails g simple_form:install

#更新application.js，添加如下代码
//= require jquery
//= require jquery_ujs
//= require rails.validations
//= require rails.validations.simple_form
window.ClientSideValidations.callbacks.element.fail = function(element, message, callback) {
    $('.submit').prop("disabled",true);
    callback();
};

window.ClientSideValidations.callbacks.element.pass = function(element, callback) {
    $('.submit').prop("disabled",false);
    callback();
};

#更新rails.validations.js,添加如下代码
  $(document).bind((window.Turbolinks ? 'turbolinks:load' : 'ready'), function() {
    ClientSideValidations.disableValidators();
    return $(ClientSideValidations.selectors.forms).validate();
  });

#model中使用validates方法
class < ApplicationRecord
  validates :name, presence: { message: "名字不能为空！" }
end


#更新view文件
<%= simple_form_for @user, validate: true do |form| %>
...
<% end %>