skip to Main Content

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!

2

Answers


  1. Chosen as BEST ANSWER

    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.


  2. Try changing the order of your assets so the turbolinks will be the last item in your file:

    //= 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 bootstrap3-editable/bootstrap-editable
    //= require_tree .
    //= require turbolinks
    

    I know you said you’re not using torbolinks, but I had a problem with my JS code for select2 and fuelux wizard (apparently not related with turbolinks) and making this changes solved it.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search