当字段为空时如何在输入字段内显示字体超棒图标？

Question

当字段为空时，我必须在输入字段中显示字体真棒图标。

我正在使用jquery验证。当我单击提交按钮时，然后>

我正在获取输出。如果字段较小或较大，我必须在所有输入字段中从顶部，底部，右侧以相等的间距显示图标。

您能帮我这个忙吗？

$("#form").validate({
  rules: {
    firstname: {
      required: true,
      minlength: 3
    },
    middlename: {
      required: true,
      minlength: 3
    },

    lastname: {
      required: true,
      minlength: 3
    },
    email: {
      required: true,
      email: true,
    },

    phone: {
      required: true,
      minlength: 10,
      maxlength: 10,
      number: true
    }

  },

  messages: {
    email: {
      required: "This field is required.",
      email: "Please enter a valid email address."
    }
  },
  submitHandler: function(form) {
    form.submit();
  }
});
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  display: table;
}

form {
  width: 500px;
  margin: auto;
}

.form-control.error {
  border-color: #e74c3c;
}

input.form-control.error+ :after {
  content: "\f06a";
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  display: inline-block;
  width: 10px;
  height: 10px;
  color: #e74c3c;
  position: absolute;
  top: 32%;
  right: 10%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<div class="container">
  <form action="#" name="form" id="form" method="post">

    <div class="row">
      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
        <div class="form-group">
          <label>firstname</label>
          <input type="text" name="firstname" class="form-control">
        </div>
      </div>
      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
        <div class="form-group">
          <label>Middlename</label>
          <input type="text" name="middlename" class="form-control">
        </div>
      </div>
      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
        <div class="form-group">
          <label>Lastname</label>
          <input type="text" name="lastname" class="form-control">
        </div>
      </div>
      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
        <div class="form-group">
          <label>Email</label>
          <input type="email" name="email" class="form-control">
        </div>
      </div>
      <div class="col-xl-6 col-lg-6 col-md-4 col-sm-12 col-xs-12">
        <div class="form-group">
          <label>Phone</label>
          <input type="text" name="phone" class="form-control">
        </div>
      </div>
    </div>


    <input type="submit" name="send" value="Submit">
  </form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

当字段为空时，我必须在输入字段内显示字体真棒图标。我正在使用jquery验证。当我单击提交按钮时，我得到了输出。我必须...

Answer 1

输入后添加此内容