带有图标的jQuery验证插件自定义错误消息

时间:2020-05-15 13:37:01

标签: javascript jquery jquery-validate

我使用jQuery验证插件创建了一个电子邮件验证脚本。我想要显示带有错误图标图像的错误消息,就像在图片中一样。我该如何实现?

See the picture here

Here's the icon error image

$("#form-1").validate();
<section class="right-section">
  <img class="logo" src="images/logo.svg" alt="Base Apparel Logo">
  <div class="row">
    <div class="col-lg-6">
      <h1 class="heading-1">
        <span class="sc-1">WE'RE</span><br> 
        COMING<br>
        SOON
      </h1>
      <p class="para-1">Hello fellow shoppers! We're currently building our new fashion store. Add your email below to stay up-to-date with announcements and our launch deals.</p>
      <form id="form-1">
        <div class="form-group">
          <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Email Address">
          <button type="button" class="btn btn-deafult" style="float: right;" type="submit">
          <img src="images/icon-arrow.svg" alt="button-image-arrow" />
        </button>
        </div>
      </form>
    </div>
    <div class="col-lg-6">
      <img class="desktop-img" src="images/hero-desktop.jpg" alt="Model-pic">
    </div>
  </div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/additional-methods.min.js"></script>

0 个答案:

没有答案