如何在 Bootstrap 模式中启用客户端验证

Question

我在具有引导模式（用于登录/注册）的应用程序上工作，其中执行 客户端验证。当您尝试在 db 中使用常规但不存在的电子邮件登录时，将执行 服务器端验证，并将您重定向到用户/登录页面。

因此，我需要在客户端进行验证并在模式中显示错误消息，而不是重定向。问题是，我第一次在真正的大型应用程序上工作，我找不到执行这些验证和重定向的地方。我找不到任何相关的 JS 文件或控制器操作..

用户模型：

  validates :password, presence: true, :on => :create
  validates :password, confirmation: true, :on => :create
  validates :email, presence: true
  validates :username, uniqueness: true, presence: true
  validates_format_of :username, :with  => /^[a-z\d]*$/, :message => "Just letters and numbers please"

注册方式：

#modal-registration.modal.hide.fade{"aria-hidden" => "true", "aria-labelledby" => "registrationLabel", role: "dialog", tabindex: "-1"}
  .modal-header
    %button.close{"aria-hidden" => "true", "data-dismiss" => "modal", type: "button"} ×
    %h3#myModalLabel Registration
  .modal-body
    .row-fluid
      .span6
        = simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name), html: { class: "form", id: "registration-form" }, :validate => true) do |f|
          .control-group
            .controls
              = f.input :email, autofocus: true, label: false, placeholder: 'email'
          .control-group
            .controls
              = f.input :username, autofocus: true, label: false, placeholder: 'Username'
          .control-group
            .controls
              = f.input :password, label: false, placeholder: 'Password'
          .control-group
            .controls
              = f.input :password_confirmation, label: false, placeholder: 'Password confirmation'
          .control-group
            .controls
              = f.button :submit, "Registration"
      .span6
        = link_to "Registration via Facebook", "#", class: "btn btn-large btn-block"
        = link_to "Registration via LinkedIn", "#", class: "btn btn-large btn-block"
  .modal-footer
    %button.btn{"aria-hidden" => "true", "data-dismiss" => "modal"} Close

Client_side_validation jQuery：

jQuery ->
  $("#modal-registration, #modal-sign-in").on "shown", ->
    $(ClientSideValidations.selectors.forms).validate()

使用过的 gem：devise、client_side_validations、client_side_validations_simple_form、bootstrap、haml。

Answer 1

你试过rails bootstrap forms gem吗？

您可以使用 rails bootstrap forms gem 轻松地进行客户端验证

您只需添加remote: true代码，例如：

= bootstrap_form_for(resource, :as => resource_name, :url => registration_path(resource_name), :remote => true) do |f|
  = f.email_field :email
  = f.text_field :username
  = f.password_field :password
  = f.password_field :password_confirmation
  = f.submit