嗨我有一个包含多个字段的表单，我正在使用客户端验证，表单分为三个部分，显示为制表符，但表单相同。
实际上表单是相同的，只有它有3个选项卡，html以
给出<%= 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>nishant.varshney4114@gmail.com
<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 %>
并在config / initializers / client_side_validations.rb中有
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
在第一页上客户端验证工作并显示错误消息但是当我移动到下一个选项卡时，客户端验证不起作用但我给出了：validate =＆gt;对于验证所需的字段是真的，有人请告诉我我错过了什么？
答案 0 :(得分：0)
由于页面加载时标签不可见，因此验证不会对它们有效。您需要在标签更改时手动触发它们。 我用了
$('#my_form').enableClientSideValidations();