Rails - проблема проверки на стороне клиента в многостадийной форме

Question

У меня есть форма в рельсах, который является многопрофильной формой шага я использовал этот драгоценный камень 'client_side_validations', github: "DavyJonesLocker/client_side_validations", branch: "4-2-stable"

и форма

<%= 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'> 
      <%= 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' id="next_form" 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 %> 

форма id является #msform, а следующий идентификатор кнопки - #next_form, поэтому теперь я выполнил проверку на стороне клиента в многошаговой форме, и я поставил код javascript как

$("#next_form").bind("click", function(e) { 
    //If the form is valid then go to next else don't 
    var valid = true; 
    // this will cycle through all visible inputs and attempt to validate all of them. 
    // if validations fail 'valid' is set to false 
    $('[data-validate] input:visible').each(function() { 
     var settings = window.ClientSideValidations.forms[this.form.id] 
     if (!$(this).isValid(settings.validators)) { 
      valid = false 
     } 
    }); 
    if(valid){ 
     //code to go to next step 
     $("#msform").enableClientSideValidations(); 
    } 
    // if any of the inputs are invalid we want to disrupt the click event 
    return valid; 
}); 

Я получаю сообщения об ошибках в первой форме, но когда я нажимаю следующую, а другая форма шага приходит на стороне клиента, валидация не работает Я не могу решить это с 3-х дней, пожалуйста, помогите !!

Answer 1

Возможно, что валидатор прослушивает, потому что вы используете переменную «this» в событии кнопки. Попробуйте использовать конкретный селектор формы, как это:

var form = $('#msform'); 
var form_validators = ClientSideValidations.forms[form.attr('id')].validators 
if (!form.isValid(form_validators)) { 
    valid = false; 
} 

попробовать также сбросу валидатор после показа формы:

if(valid){ 
    $("#msform").resetClientSideValidations(); 
    $("#msform").enableClientSideValidations(); 
}