Rails JQuery Validate within Modal not Firing

Question

I have been successful in getting JQuery form validation to work just fine within the regular body of the page, however, when I try to get validation working within a modal box, JQuery doesn't fire.

Modal Partial:

<div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">New Account</h4>
        </div>
        <div class="modal-body" id = "addClientForm">
          <%= simple_form_for @client, :remote => true, :html => { :id => "addClientForm"} do |f| %>
            <div>    
              <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                <%= f.input :company_name %>
              </div>  
               <%= f.button :submit %>
            </div>
            <div class="clearfix">
            </div>
          <% end %>
        </div>
      </div>
    </div>                      
  </div>

Script: When I place the form outside of the modal, I use $(document).ready( function () { instead of $("#myModal").on("shown.bs.modal", function () {. However, document. ready doesnt work for the form when its within the modal.

 <script>
      $("#myModal").on("shown.bs.modal", function () {
        $("#addClientForm").validate({
          rules: {
            "client[company_name]": {
              required: true
            }
          },
          messages: {
            "client[company_name]": {
              required: "Company Name is a required field."
            }
          }
      });
    } );
</script>

Model:

class Client < ActiveRecord::Base
  validates :company_name, presence: true

  has_many :quotes
  has_many :current_plans 
end

Terminal Output: When JQuery fires properly, I get no feedback in the terminal and the validation shows. When JQuery doesn't fire I get: Started POST "/clients" for 66.186.164.130 at 2015-08-19 18:16:54 +0000 Processing by ClientsController#create as JS

  Parameters: {"utf8"=>"✓", "client"=>{"company_name"=>""}, "commit"=>"Create Client"}
   (30.5ms)  BEGIN
   (30.5ms)  ROLLBACK
   (30.8ms)  SELECT COUNT(*) FROM "clients"
   (30.6ms)  SELECT COUNT(*) FROM "quotes"
  Rendered clients/_client_table.html.erb (0.1ms)
  Rendered clients/_newClientModal.html.erb (15.3ms)
  Rendered clients/home.html.erb (82.0ms)
Completed 200 OK in 152ms (Views: 25.2ms | ActiveRecord: 122.4ms)

application.js:

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui/datepicker
//= require best_in_place
//= require best_in_place.jquery-ui
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require jquery.validate
//= require jquery.validate.additional-methods
//= require dataTables/jquery.dataTables
//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
//= require dataTables/jquery.dataTables
//= require dataTables/extras/dataTables.tableTools
//= require twitter/bootstrap
//= require turbolinks
//= require bootstrap3-editable/bootstrap-editable
//= require_tree .

Please let me know if you need any further information. Thanks!

Answer 1

After a substantial amount of trial and error - I removed id = addClientForm from the modal-body div, and the JQuery validation worked. Don't know why it was there in the first place but it caused a lot of headache.