Question

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

Answer 1

您可以尝试像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>

将div放在最近的div之上

1 个答案: