将div放在最近的div之上

时间:2018-03-05 05:12:14

标签: jquery

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

Structure

Error

1 个答案:

答案 0 :(得分: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>