将div放在最近的div之上

问题描述 投票:0回答:1

无论如何使用jquery在webform组件之前添加消息错误?我尝试使用兄弟,但消息错误得到重复。目前,错误通知显示在字段的底部我想将它放在字段的顶部

Structure

Error

jquery
1个回答
0
投票

您可以尝试像Sagar评论的前置函数。这是简单的样本。

$("#submit").click(function() {

  $('.web-form-component--first-name').prepend('<div class="messages error">Error First name</div>');

  $('.web-form-component--last-name').prepend('<div class="messages error">Error Last name</div>');

  return false;

});
.error {
  background-color: red;
  color: #fff;
}

.messages {
  padding: 6px;
  margin:4px;
}
input{
  width:100%;
  padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form class="form">
  <div class="web-form-component--first-name">
    <input type="text" name="firstname" placeholder="First name">
  </div>
  <br>
  <div class="web-form-component--last-name">
    <input type="text" name="lasttname" placeholder="Last name">
  </div>
  <br>
  <input type="submit" id="submit" name="submit" value="submit">
</form>
© www.soinside.com 2019 - 2024. All rights reserved.