我有一个邀请表单,我使用JQuery Validation Plugin创建了一些自定义消息。我遇到的问题是提交表单时,自定义字段显示正确。但是,如果我第二次提交表单,则会隐藏订单项。知道验证员为什么要改变这些项目以隐藏在随后的提交中?
**_form.html.erb**
<section id="invitations-dropmodule" class="invitations-dropmodule dropmodule">
<h3 class="invitations-title">Share the love with your family!</h3>
<div id="errorContainer">
<p id="errorHeader">Please correct the following errors:</p>
<ul />
</div>
<%= simple_form_for(resource, as: resource_name, url: invitation_path(resource_name), html: {method: :post, id: 'invitations-form', class: 'invitations-form'}) do |f| %>
<%= f.input :full_name, label: false, placeholder: "Family Member's Name", input_html: { maxlength: 30, size: 40, value: nil } %>
<%= f.input :email, label: false, placeholder: "Their Email Address", input_html: { value: nil } %>
<div class="radio_buttons">
<%= f.label "Their Gender:"%>
<%= f.collection_radio_buttons :gender, [["male", "male"] ,["female", "female"]], :first, :last, {:item_wrapper_class => ''}, {:class => "with-gap" } %>
</div>
<%= f.input :invitation_relation, label: false, :include_blank => 'I am this person\'s: ', selected: "I am this person's", collection: relation_types, label_method: :humanize, input_html: { class: "browser-default dropmodule__input-select" } %>
<%= submit_tag "Send Invitation" %>
<% end %>
</section>
这里是.js文件:
// Add Invite Form validation
$(document).ready(function(){
$('#invitations-form').validate({
rules : {
"user[full_name]" : {
required : true
},
"user[email]" : {
required : true
},
"user[invitation_relation]" : {
required : true
},
},
messages: {
"user[full_name]": "Name is required",
"user[email]": "Email is required",
"user[invitation_relation]": "Relation is required",
},
errorContainer: $('#errorContainer'),
errorLabelContainer: $('#errorContainer ul'),
wrapper: 'li'
}); // end validate
}); // end ready
修改
呈现HTML标记:
<a data-activate="#invitations-dropmodule" class="dropmodule-btn invitations-btn right hide-on-med-and-down" title="Invite a Family Member"><i class="icon-mail"></i><span>invite</span></a>
<section id="invitations-dropmodule" class="invitations-dropmodule dropmodule">
<h3 class="invitations-title">Share the love with your family!</h3>
<!-- <form id="invitations-form" name="invitations" action="index.html" method="post" class="invitations-form">
<input type="email" name="email" placeholder="Enter Email Address">
<input type="submit" value="Send Invitation">
</form> -->
<div id="errorContainer">
<p id="errorHeader">Please correct the following errors:</p>
<ul />
</div>
<form accept-charset="UTF-8" action="/users/invitation" class="simple_form invitations-form" id="invitations-form" method="post" novalidate="novalidate"><div style="display:none"><input name="utf8" type="hidden" value="✓" /></div>
<div class="input string optional user_full_name"><input class="string optional" id="user_full_name" maxlength="30" name="user[full_name]" placeholder="Family Member's Name" size="40" type="text" /></div>
<div class="input email optional user_email"><input class="string email optional" id="user_email" name="user[email]" placeholder="Their Email Address" type="email" /></div>
<div class="radio_buttons">
<label class="string optional control-label" for="user_Their Gender:">Their gender:</label>
<span class=""><input checked="checked" class="with-gap" id="user_gender_male" name="user[gender]" type="radio" value="male" /><label class="collection_radio_buttons" for="user_gender_male">male</label></span><span class=""><input class="with-gap" id="user_gender_female" name="user[gender]" type="radio" value="female" /><label class="collection_radio_buttons" for="user_gender_female">female</label></span>
</div>
<div class="input select optional user_invitation_relation"><select class="select optional browser-default dropmodule__input-select" id="user_invitation_relation" name="user[invitation_relation]"><option value="">I am this person's: </option>
<option value="great_grandmother">Great grandmother</option>
<option value="great_grandfather">Great grandfather</option>
<option value="grandmother">Grandmother</option>
<option value="grandfather">Grandfather</option>
<option value="mom">Mom</option>
<option value="dad">Dad</option>
<option value="wife">Wife</option>
<option value="husband">Husband</option>
<option value="aunt">Aunt</option>
<option value="uncle">Uncle</option>
<option value="sister">Sister</option>
<option value="brother">Brother</option>
<option value="cousin">Cousin</option>
<option value="daughter">Daughter</option>
<option value="son">Son</option>
<option value="niece">Niece</option>
<option value="nephew">Nephew</option>
<option value="granddaughter">Granddaughter</option>
<option value="grandson">Grandson</option>
<option value="great_granddaughter">Great granddaughter</option>
<option value="great_grandson">Great grandson</option></select></div>
<input name="commit" type="submit" value="Send Invitation" />
</form>
</section>