有没有一种方法可以使用jQuery validate为输入显示两个不同的错误消息？

如何解决有没有一种方法可以使用jQuery validate为输入显示两个不同的错误消息？

我有一个表单，希望在每个字段的两个不同位置显示错误消息，并使它们成为不同的消息。一个在占位符中，另一个在我自定义错误框中的表单上方。到现在为止，它已经工作并显示两次，但是我仍然坚持如何使自定义错误框中的消息成为同一字段的不同消息，例如在“名字”的输入占位符中会显示“第一个”名称为必填项”，然后在错误框中显示“我们需要一个名字”。

codepen链接 https://codepen.io/mDDDD/pen/jOqzWLN

html：

  <form class="register-form row" id="register-form">

           <div class="error-message-Box" id="errorBox">  
             <p class="error-title">We're sorry. We need you to fix the following fields:</p>
           <p class="error-list"></p>
          </div>

          <div class="register_input-container all">
            <input id="register_first-name" class="form-input" name="firstName" type="text" placeholder="First name*">
          </div>


          <div class="register_input-container all">
            <input id="register_last-name" class="form-input" name="lastName" type="text" placeholder="Last name*">
          </div>

          <div class="register_input-container all">
            <input id="register_email" class="form-input" name="email" type="email" placeholder="Email address*">
          </div>
      <button>submit form</button
</form>

jquery：

   $('#register-form').validate({
        debug: true,onfocusout: false,rules: {
          firstName: {
            required: true,},lastName: {
            required: true,email: {
            required: true,messages: {
          firstName: "First name is required.",lastName: "Last name is required.",email: "Valid email is required.",errorPlacement: function (error,element) {
          if (element.attr("type") == "checkBox") {
            error.insertAfter(element);
          }

          if (element.attr("name") == "firstName")
        
            error.appendTo(".error-list");
          if (element.attr("name") == "firstName")
            element.attr("placeholder",error.text());

          if (element.attr("name") == "lastName")
       
            error.appendTo(".error-list");
          if (element.attr("name") == "lastName")
            element.attr("placeholder",error.text());

          if (element.attr("name") == "email")
          
            error.appendTo(".error-list");
          if (element.attr("name") == "email")
            element.attr("placeholder",error.text());
          
          else {
            element.attr("placeholder",error.text());
          }
        },showErrors: function (errorMap,errorList) {
          this.defaultShowErrors(); 
          
          if (this.numberOfInvalids() > 0) {
            $("#errorBox").show();
          } else {
            $("#errorBox").hide();
          }
        }  
});