Question

正如标题所示，我想将jQuery Validation错误消息附加到输入字段，或者至少有人帮我定位它们。

错误消息正在弄乱表单，因为它们或多或少只是随机弹出。

我想在每个输入字段下显示消息。

$(document).ready(function() {
  $('#register-form').validate({
    errorClass: 'error',
    rules: { //set rules for specific inputs
      name: {
        required: true,
        lettersonly: true
      },
      email: { //refers to the inputs name
        required: true,
        email: true
      },
      subject: {
        required: true,
        lettersonly: true,
      },
      workground: {
        required: true,
        lettersonly: true,
      },
      text: {
        required: true,

      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
<form action="php/PHPMailer/send-mail.php" method="post" id="register-form">
  <input class="contact-input-type1" name="name" placeholder="Name" autocomplete="off">
  <input class="contact-input-type1" name="email" placeholder="E-Mail-Adresse" autocomplete="off">
  <input class="contact-input-type2" name="subject" placeholder="Anliegen" autocomplete="off">
  <input class="contact-input-type2" name="workground" placeholder="Metier" autocomplete="off">
  <textarea maxlength="300" class="contact-textarea" name="text" placeholder="Nachricht" autocomplete="off"></textarea>
  <input type="submit" class="contact-submit" value="Abschicken">
</form>

Answer 1

请参阅下面的代码段：

＆＃13;

$('#register-form').validate({
  errorClass: 'error',
  rules: { //set rules for specific inputs
    name: {
      required: true,
      lettersonly: true
    },
    email: { //refers to the inputs name
      required: true,
      email: true
    },
    subject: {
      required: true,
      lettersonly: true,
    },
    workground: {
      required: true,
      lettersonly: true,
    },
    text: {
      required: true,

    }

  }
});

＆＃13;

label.error {
  float: none;
  color: red;
  padding-left: .5em;
  vertical-align: top;
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<form action="php/PHPMailer/send-mail.php" method="post" id="register-form">
  <input class="contact-input-type1" name="name" placeholder="Name" autocomplete="off">
  <input class="contact-input-type1" name="email" placeholder="E-Mail-Adresse" autocomplete="off">
  <input class="contact-input-type2" name="subject" placeholder="Anliegen" autocomplete="off">
  <input class="contact-input-type2" name="workground" placeholder="Metier" autocomplete="off">
  <textarea maxlength="300" class="contact-textarea" name="text" placeholder="Nachricht" autocomplete="off"></textarea>
  <input type="submit" class="contact-submit" value="Abschicken">
</form>

＆＃13;

在jQuery Validation中将错误消息附加到输入

1 个答案: