[英]Rails - Client side validation issue in multi step form
我在rails中有一个表单,它是一个多步骤表单,我已经使用了这个'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,下一个按钮ID为#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天了,请帮忙!
验证程序有可能出错,因为您在按钮事件上使用了'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();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.