使用 jquery 验证 errorPlacement 以获取特定 div 中的错误消息

Question

我正在尝试使用 jQuery Validate 的 errorPlacement 函数来放置错误消息，但我无法弄清楚。每当我点击提交时，输入就会向下滑动，而不是错误放在 newsletterValidate div.

有人看到我的 errorPlacement 代码哪里做错了吗？

$('#newsletterForm').validate({
  //errorClass: 'invalid',
  errorPlacement: function(error, element) { 
   //element.val(error[0].outerText);
   //error.appendTo(element.next('div'));
    error.appendTo(element.parent('div').next('div').find('#newsletterValidate'));
  },
  rules: {
   email: {
    required: true,
    email: true
   }
  },
  messages: {
   email: {
    required: "Please enter your email address",
    email: "Please enter a valid email address"
   }
  },
  submitHandler: function(form) {
   event.preventDefault();
   var datastring = $('#newsletterForm').serialize();
   $.ajax({
    url: 'http://localhost:8080/php/newsletterSend.php',
    type: 'POST',
    data: datastring
    ,
    success: function(data) {
     console.log(data);
     if (data == 'Error!') {
      alert('Unable to submit form!');
      alert(data);
     } else {
      $('#newsletterInput')[0].reset();
      $('#newsletterSuccess').show();
     }
    },
    error: function(xhr, textStatus, errorThrown) {
     alert(textStatus + '|' + errorThrown);
     console.log('error');
    }
   });
  }
 });

#newsletterInput {
 width: 70%;
 border: none;
 padding: 15px 10px;
 outline: none;
 font-size: 1.1rem;
 font-family: 'Nunito', sans-serif;
 display: inline-block;
  background: pink;
}
#newsletterSubmit {
 width: 25%;
 display: inline-block;
 border: none;
 font-size: 1.1rem;
 font-family: 'Nunito', sans-serif;
 padding: 15px 10px;
 cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
<div>
  <form id="newsletterForm">
    <input type="email" id="newsletterInput" name="email" placeholder="Email Address *"><input type="submit" id="newsletterSubmit">
  </form>
</div>
<div id="newsletterValidate"></div>

Answer 1

error.appendTo(element.parent('div').next('div').find('#newsletterValidate'));

我不确定你为什么使用 jQuery 在 DOM 内部遍历，而你已经知道唯一的 id。所以直接跳到你的目标...

error.appendTo($('#newsletterValidate'));

演示 1：jsfiddle.net/b2enbs0s/

但是，既然它正在运行，您会发现存在不同的问题。 .

那是因为您试图将消息 放在 form 容器的 之外...

<div>
    <form id="newsletterForm">
        <input type="email" id="newsletterInput" name="email" placeholder="Email Address *"><input type="submit" id="newsletterSubmit">
    </form>
</div>
<!--// outside of the form //-->
<div id="newsletterValidate"></div>

在这种情况下，插件会创建验证消息但无法再次找到它以正确切换它。

解决方法是将消息元素 放置在 form 容器的 中，插件创建后可以在其中自动查找和切换。以下结构在视觉上呈现与您的原始布局相同...

<form id="newsletterForm">
    <div>
         <input type="email" id="newsletterInput" name="email" placeholder="Email Address *"><input type="submit" id="newsletterSubmit">
    </div>
    <!--// inside of the form //-->
    <div id="newsletterValidate"></div>
</form>

最终工作演示：jsfiddle.net/b2enbs0s/1/

使用 jquery 验证 errorPlacement 以获取特定 div 中的错误消息

Using jquery validate errorPlacement to get error message in a specific div

javascript

jquery

jquery-validate

errorplacement