Client_side_validations gem with formtastic in jquery modal view not working

问题

I'm trying to get the client_side_validations gem to validate my form in a jquery modal view, but the validations aren't occurring (at least insofar as the errors aren't appearing inline).

I'm using the formtastic gem as well, so I've installed client_side_validations and client_side_validations-formtastic gems for formtastic support.

Note: I include the rails.validations javascript in my app/views/layouts/application.html.erb

Here is my code:

app/views/home/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>

app/models/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

config/initializers/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

Any help or suggestions would be much appreciated!

回答1:

Try that:

Change:

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

To:

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

来源：https://stackoverflow.com/questions/14135148/client-side-validations-gem-with-formtastic-in-jquery-modal-view-not-working