使用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 %>