使用Jquery验证的Rails 4表单验证问题

Question

我有一个邀请表单，我使用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="&#x2713;" /></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&#39;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&#39;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>