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
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.Try changing the order of your assets so the turbolinks will be the last item in your file:
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.