表单问题提交处理程序属性

Question

我正在使用jQuery验证插件，我正在尝试在消息div区域中显示名字和姓氏。该名称仅短暂出现并消失。我无法弄清楚原因。

此外，当字段为空时，我会收到错误消息，但现在我的下拉列表中的选项在通过验证过程后仍未显示。

//form
 $(document).ready(function() {

var display = function () {

        var fullName = $("#FirstName").val() + ' ' + $("#LastName").val();
        return fullName;

}

    $("#myForm").submit(function(){
    $("#message").empty().append (display());
    $(":input").empty();
}); 

 //validate
$("#myForm").validate ({
rules: {
  FirstName:  {
  required: true,
  FirstName: true 
  },
LastName:  {
  required: true,
  LastName: true 
  },
Email:  {
  required: true,
  Email: true 
  },

errorPlacement: function(error, element) { 
   if ( element.is(":radio") || element.is(":checkbox")) {
      error.appendTo( element.parent()); 
    } else {
      error.insertAfter(element);
    } 

    }

     },


messages: {
  FirstName: "Please enter your first name",
  LastName: "Please enter your last name",
  Email: "Please enter your email address",
  submitHandler : function() {
  display();
   }

}
    }); //end validate  

    //toggle

    $("#toggleDiv").hide();
    $("#toggleField").click(function(){
    $("#toggleDiv").toggle("slow");
    }); 

   }); // end ready

HTML

<div id="message">
 </div>

 <form id="myForm" name="form" method="post" action="">  

 <p class="FirstName">  
    <label for="FirstName">First Name:</label>
  </p>
    <p>
    <input name="FirstName" class="required" title="Please enter your first name"      type="text" id="FirstName" />  

</p>  

<p class="LastName">  
    <label for="LastName">Last Name:</label></p>
    <p>
    <input name="LastName" class="required" title="Please enter your last name"   type="text" id="LastName" />  

</p>

 <p class="Email">  
    <label for="Email">Email:</label></p>
    <p>
    <input name="Email" class="required" title="Please enter your email address" type="text" id="Email" />  

</p>

<p>
<label for="myList" class="myList">Favorite Food</label>
                        <select id="myList"    class="required" title="Please select an item from the list" name="myList">
                            <option value="">What is your favorite type of food?</option>
                            <option value="mac_cheese">Mac and Cheese</option>
                            <option value="poptarts">Poptarts</option>
                            <option value="candy">Candy</option>
                          </select>  

  </p>


 <p class="checkbox">
<label for="checkbox">Are you in the Web Development track?</label>
</p>

<input type="checkbox" id="toggleField" name="checkbox" value="Yes">Yes<br>


</p>
<div id=toggleDiv>   
<p class="comments">
  <label for="comments">Explain why you chose this track.</label>
</p>
<p class="comments">  
    <textarea name="comments" cols="75" rows="8" id="comments"></textarea>  
 </p>
 </div>
<p class="submit">  
    <input name="myForm" type="submit" id="submit" value="Submit" />
</p>