Question

我正在尝试获取client_side_validations gem以在jquery模式视图中验证我的表单，但验证没有发生（至少在错误未显示为内联的情况下）。

我也在使用formtastic gem，所以我已经安装了client_side_validations和client_side_validations-formtastic gem来进行formtastic支持。

注意：我在app / views / layouts / application.html.erb中包含rails.validations javascript

这是我的代码：

应用/视图/家/ index.html.erb：

   <script type="text/javascript">
      $(document).on("click", "btn-signup", function trans() {
            Modal.prototype.hideWithTransition = function(){
                  $("#signup").fadeIn();
            };
      });
    </script>
    <script type="text/javascript">
      $('#new_user').enableClientSideValidations();
      $('#new_user').on('shown', function() {
        $(ClientSideValidations.selectors.forms).validate();
      });
    </script>
    <div class="row">
      <div class="twelvecol last">
        <div id="vidplaceholder">
          <div id="landing-action">
            <p></p>
            <fieldset>

              <!-- The sign up modal view -->
               <div id="signup" class="modal hide fade in" style="display: none;">  
                <% @user = User.new %>
                <%= semantic_form_for @user, :remote => true, :validate => true do |f| %>
                <div class="modal-header">  
                  <a class="close" data-dismiss="modal">×</a>  
                  <h3>Test header </h3>
                </div>  
                <div class="modal-body">  
                    <div class="field">
                      <%= f.input :email %>
                    </div>
                    <div class="field">
                      <%= f.input :website %>
                    </div>
                    <div class="field">
                      <%= f.input :projects %>
                    </div>
                </div>
                <div class="modal-footer">  
                <button type="submit" class="btn btn-success">Submit</button>
                </div>  
               </div>  
              <% end %>


               <!-- The modal view is triggered here -->
                <a data-toggle="modal" href="#signup" class="btn btn-primary
                btn-large btn-signup">Sign up</a>
              </fieldset>
            <p></p>
          </div>
        </div>
      </div>
    </div>

   <script type="text/javascript">
     $("#new_user").on("submit", function hide_form() {
        $("#signup").modal('hide');
     });
    </script>

应用/模型/ user.erb：

class User < ActiveRecord::Base

  attr_accessible :email, :website, :projects

  before_save { |user| user.email = email.downcase }

  VALID_EMAIL_REGEX = /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i
  validates :email, presence: true 
  validates :email, format: { with: VALID_EMAIL_REGEX }
  validates :email, uniqueness: { case_sensitive: false }

  validates :website, :format => URI::regexp(%w(http https)), :allow_blank => true

end

配置/初始化/ client_side_validations.rb：

# ClientSideValidations Initializer

require 'client_side_validations/formtastic' if defined?(::Formtastic)

# Uncomment to disable uniqueness validator, possible security issue
# ClientSideValidations::Config.disabled_validators = [:uniqueness]

# Uncomment the following block if you want each input field to have the validation messages attached.
 ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
   unless html_tag =~ /^<label/
     %{<div class="field_with_errors">#{html_tag}<label for="#{instance.send(:tag_id)}" class="message">#{instance.error_message.first}</label></div>}.html_safe
   else
     %{<div class="field_with_errors">#{html_tag}</div>}.html_safe
   end
 end

非常感谢任何帮助或建议！

Answer 1

试试：

变化：

   <script type="text/javascript">
     $('#new_user').enableClientSideValidations();
     $('#new_user').on('shown', function() {
       $(ClientSideValidations.selectors.forms).validate();
     });
   </script>

要：

   <script type="text/javascript">
      $('#new_user').validate();
      $('#signup').on('shown', function() {
        $(ClientSideValidations.selectors.forms).validate();
      });
    </script>

Client_side_validations gem与jquery模态视图中的formtastic不起作用

1 个答案: