Hi i have a form which has the multiple fields and i am using client side validation on it and the form is divided into three parts and displayed as tabs but the form is same.
actually the form is same only it has 3 tabs and the html is given as
<%= form_for @employee, :html => {:multipart => true, :id => 'msform'}, :validate => true do |f| %>
<%= render 'shared/error_messages', :target => @employee %>
<ul id='progressbar'>
<li class='active'>Account</li>
<li>Address</li>
<li>Contact</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class='fs-title margin_0 bg_red white-text left-align margin_B20'>Create
Account</h2>
<div class='row form_row padding_L20 padding_R20 margin_B15'>
<div class='col s12 m4 left-align'>
<label for='usrname' class='form_label'>User Name</label>
</div>
<%= f.fields_for :profile do |p| %>
<div class='col s12 m8'>
<div class='input-field'>
<%= p.text_field :name, :validate => true, :class => 'validate form_input' %>
</div>
</div>
<% end %>
</div>
<div class='row form_row padding_L20 padding_R20 margin_B15'>
<div class='col s12 m4 left-align'>
<label class='form_label'>Email</label>
</div>
<div class='col s12 m8'>
<div class='input-field'>
<%= f.text_field :email, :validate => true, :class => 'validate form_input' %>
</div>
</div>
</div>
<div class='row form_row padding_L20 padding_R20 margin_B15'>
<div class='col s12 m4 left-align'>
<label class='form_label'>Role</label>
</div>
<div class='col s12 m8'>
<div class='input-field'>
<%= f.select :role, Employee.roles.keys, :selected => @employee[:role],
:class => 'browser-default' %>
</div>
</div>
</div>
<div class='row form_row padding_L20 padding_R20 margin_B15'>
<div class='col s12 m4 left-align'>
<label class='form_label'>Department</label>
</div>
<div class='col s12 m8'>
<div class='input-field'>
<%= f.select :department_id, @department, :class => 'browser-default' %>
</div>
</div>
</div>
<div class='row form_row padding_L20 padding_R20 margin_B15'>
<div class='col s12 m4 left-align'>
<label class='form_label'>Designation</label>
</div>
<div class='col s12 m8'>
<div class='input-field'>
<%= f.select :designation_id, @designation, :class => 'browser-default' %>
</div>
</div>
</div>
<div class='row form_row padding_L20 padding_R20 margin_B15'>
<div class='col s12 m4 left-align'>
<label class='form_label'>Set Ex Employee</label>
</div>
<div class='col s12 m8'>
<div class="left-align margin_T15">
<%= f.check_box :is_active, {checked: (@employee.is_active ? false : true),
:class => 'filled-in', :id => 'filled-in-box1'}, 0, 1 %>
<label for='filled-in-box1' class="margin_R20"></label>
</div>
</div>
</div>
<div class='row form_row padding_L20 padding_R20 margin_B15 margin_T10'>
<div class='col s12 m4 left-align'>
<label for='' class='form_label'>Add Photo</label>
</div>
<div class='col s12 m8'>
<div class='file-field left-align'>
<input class='file-path validate' type='text'/>
<div class='btn'><span>Browse</span>
<%= f.fields_for :attachments do |attach| %>
<%= attach.file_field :attach, :class => 'btn' %>
<% end %>
</div>
</div>
</div>
</div>
<%= f.fields_for :profile do |p| %>
<div class='row form_row padding_L20 padding_R20 margin_B15'>
<div class='col s12 m4 left-align'>
<label for='date' class='form_label'>Date of Joining</label>
</div>
<div class='col s12 m8'>
<div class='input-field'>
<%= p.text_field :date_of_joining, :placeholder => 'Select Date',
:class => 'set-year picker_input', :validate => true %>
</div>
</div>
</div>
<div class='row form_row padding_L20 padding_R20 margin_B15'>
<div class='col s12 m4 left-align'>
<label for='date' class='form_label'>Date of Birth</label>
</div>
<div class='col s12 m8'>
<div class='input-field'>
<%= p.text_field :date_of_birth, :placeholder => 'Select Date',
:class => 'set-year picker_input', :validate => true %>
</div>
</div>
</div>[email protected]
<div class='row form_row padding_L20 padding_R20 margin_B15'>
<div class='col s12 m4 left-align'>
<label for='date' class='form_label'>Aniversary</label>
</div>
<div class='col s12 m8'>
<div class='input-field'>
<%= p.text_field :aniversary, :placeholder => 'Select Date',
:class => 'set-year picker_input ' %>
</div>
</div>
</div>
<div class='row form_row padding_L20 padding_R20 margin_B15'>
<div class='col s12 m4 left-align'>
<label for='lastpos' class='form_label'>Last Position</label>
</div>
<div class='col s12 m8'>
<div class='input-field'>
<%= p.text_field :last_position, :class => 'validate form_input', :validate => true %>
</div>
</div>
</div>
<div class='row form_row padding_L20 padding_R20 margin_B15'>
<div class='col s12 m4 left-align'>
<label for='lastpos' class='form_label'>Passport Number</label>
</div>
<div class='col s12 m8'>
<div class='input-field'>
<%= p.text_field :passport_no, :class => 'validate form_input' %>
</div>
</div>
</div>
<div class='row form_row padding_L20 padding_R20 margin_B15'>
<div class='col s12 m4 left-align'>
<label for='date' class='form_label'>Passport Expiry Date</label>
</div>
<div class='col s12 m8'>
<div class='input-field'>
<%= p.text_field :passport_expiry_date, :placeholder => 'Select Date',
:class => 'select-date picker_input' %>
</div>
</div>
</div>
<div class='row form_row padding_L20 padding_R20 margin_B15'>
<div class='col s12 m4 left-align'>
<label for='panno' class='form_label'>PAN Number</label>
</div>
<div class='col s12 m8'>
<div class='input-field'>
<%= p.text_field :pan_no, :class => 'validate form_input' %>
</div>
</div>
</div>
<div class='row form_row padding_L20 padding_R20 margin_B15'>
<%= f.fields_for :contact do |c| %>
<div class='col s12 m4 left-align'>
<label for='phno' class='form_label'>Phone Number</label>
</div>
<div class='col s12 m8'>
<div class='input-field'>
<%= c.text_field :phone_no, :class => 'validate form_input' %>
</div>
<% end %>
</div>
</div>
<input type='button' name='next' class='next action-button' value='Next'/>
<% end %>
</fieldset>
<fieldset>
<h2 class='fs-title margin_0 bg_red white-text left-align margin_B20'>Create
Address</h2>
<h3 class='fs-subtitle left-align margin_0'>Current Address</h3>
<%= f.fields_for :contact, :validate => true do |c| %>
<div class='row form_row padding_L20 padding_R20 margin_B15'>
<div class='col s12 m4 left-align'>
<label class='form_label'>Address 1</label>
</div>
<div class='col s12 m8'>
<div class='input-field'>
<%= c.text_field :current_address1, :class => 'validate form_input',
:id=> 'current-address-1', :validate => true %>
</div>
</div>
</div>
<div class='row form_row padding_L20 padding_R20 margin_B15'>
<div class='col s12 m4 left-align'>
<label class='form_label'>Address 2</label>
</div>
<div class='col s12 m8'>
<div class='input-field'>
<%= c.text_field :current_address2, :class => 'validate form_input',
:id=> 'current-address-2' %>
</div>
</div>
</div>
<div class='row form_row padding_L20 padding_R20 margin_B15'>
<div class='col s12 m12 left-align'>
<div class='row'>
<div class='input-field col s12 m6'>
<%= c.country_select :country, {prompt: 'Please select a country'}, {:class => 'browser-default'}, {:validate => true} %>
</div>
<div class='input-field col s12 m6'>
<%= render partial: 'subregion_select', locals: {parent_region: c.object.country} %>
</div>
</div>
</div>
</div>
<div class='row form_row padding_L20 padding_R20 margin_B15'>
<div class='col s12 m12 left-align'>
<div class='row'>
<div class='input-field col s12 m6'>
<%= c.text_field :city, :class => 'validate form_input', :placeholder =>'City',
:id=>'curr-city', :validate => true %>
</div>
<div class='input-field col s12 m6'>
<%= c.text_field :zip, :class => 'validate form_input', :placeholder =>'Zip Code',
:id=>'curr-zip', :validate => true %>
</div>
</div>
</div>
</div>
<% end %>
<h3 class='fs-subtitle left-align margin_0'>Permanent Address</h3>
<input type="checkbox" class="filled-in" id="filled-in-box2" />
<label for="filled-in-box2" class="margin_R20">Same as Current Address</label>
<div class='row form_row padding_L20 padding_R20 margin_B15'>
<%= f.fields_for :permanent_address do |per| %>
<div class='col s12 m4 left-align'>
<label for='p_address1' class='form_label'>Address 1</label>
</div>
<div class='col s12 m8'>
<div class='input-field'>
<%= per.text_field :address1, :class => 'validate form_input',
:id=>'permanent-address-1' %>
</div>
</div>
</div>
<div class='row form_row padding_L20 padding_R20 margin_B15'>
<div class='col s12 m4 left-align'>
<label for='p_address1' class='form_label'>Address 2</label>
</div>
<div class='col s12 m8'>
<div class='input-field'>
<%= per.text_field :address2, :class => 'validate form_input',
:id=>'permanent-address-2' %>
</div>
</div>
</div>
<div class='row form_row padding_L20 padding_R20 margin_B15'>
<div class='col s12 m12 left-align'>
<div class='row'>
<div class='input-field col s12 m6'>
<%= per.country_select :country, {prompt: 'Please select a country'}, {:class => 'browser-default'} %>
</div>
<div class='input-field col s12 m6'>
<%= render partial: 'permanent_state_subregions', locals: {parent_region: per.object.country} %>
</div>
</div>
</div>
</div>
<div class='row form_row padding_L20 padding_R20 margin_B15'>
<div class='col s12 m12 left-align'>
<div class='row'>
<div class='input-field col s12 m6'>
<%= per.text_field :city, :class => 'validate form_input', :placeholder =>'City', :id=>'perm-city' %>
</div>
<div class='input-field col s12 m6'>
<%= per.text_field :zip, :class => 'validate form_input', :placeholder =>'Zip Code', :id=>'perm-zip' %>
</div>
</div>
</div>
</div>
<% end %>
<input type='button' name='previous' class='previous action-button' value='Previous'/>
<input type='button' name='next' class='next action-button' value='Next'/>
</fieldset>
<fieldset>
<h2 class='fs-title margin_0 bg_red white-text left-align margin_B20'>Create
Emergency Contact Details</h2>
<%= f.fields_for :contact,:validate => true do |c| %>
<div class='row form_row padding_L20 padding_R20 margin_B15'>
<div class='col s12 m4 left-align'>
<label for='cpname' class='form_label'>Contact Person Name</label>
</div>
<div class='col s12 m8'>
<div class='input-field'>
<%= c.text_field :emergency_contact_person, :class => 'validate form_input', :validate => true %>
</div>
</div>
</div>
<div class='row form_row padding_L20 padding_R20 margin_B15'>
<div class='col s12 m4 left-align'>
<label for='cpphone' class='form_label'>Contact Number</label>
</div>
<div class='col s12 m8'>
<div class='input-field'>
<%= c.text_field :emergency_contact_no, :class => 'validate form_input', :validate => true %>
</div>
</div>
</div>
<div class='row form_row padding_L20 padding_R20 margin_B15'>
<div class='col s12 m4 left-align'>
<label for='cprelation' class='form_label'>Relation</label>
</div>
<div class='col s12 m8'>
<div class='input-field'>
<%= c.text_field :relation, :class => 'validate form_input' %>
</div>
</div>
</div>
<% end %>
<input type='button' name='previous' class='previous action-button' value='Previous'/>
<%= f.submit 'Submit', :class => 'action-button' %>
</fieldset>
<% end %>
and in the config/initializers/client_side_validations.rb i have
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
on the first page the client side validation is working and displaying error messages but when i move to the next tab , the client side validation is not working but i have given :validate => true to the fields required to validate, someone please tell me what i am missing ?
Since the tabs are not visible when the page loads, the validations will not be active on them. you need to manually trigger them when the tabs change. I used
on the form to re enable the validations after i showed some extra elements.