javascript - Rails - 客户端验证问题

Question

您好，我有一个包含多个字段的表单，我正在对其使用客户端验证，该表单分为三个部分并显示为选项卡，但表单是相同的。

实际上表单是相同的，只是有 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 => true 指定给验证所需的字段，有人请告诉我我缺少什么？

Answer 1

由于选项卡在页面加载时不可见，因此验证不会在它们上激活。当选项卡更改时，您需要手动触发它们。 我用过

$('#my_form').enableClientSideValidations();

在表单上显示一些额外元素后重新启用验证。