javascript - 有没有办法使用 jQuery validate 为输入显示两个不同的错误消息？

Question

我有一个表单，我想在每个字段的两个不同位置显示错误消息，并让它们成为不同的消息。一个在占位符中，另一个在我拥有的自定义错误框中的表单上方。到目前为止，我已经让它工作并显示了两次，但我一直坚持如何让自定义错误框中的消息成为同一字段的不同消息，例如在“名字”的输入占位符中，它会说“第一需要名字”，然后在错误框中会显示“我们需要名字”。

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();
          }
        }  
});

标签： javascriptjqueryjquery-validate