如何删除“请匹配请求的格式”

Question

如何将 “请匹配所需格式” 更改为 “无效”

我已经在整个 Stackoverflow 上找遍了，找不到任何有帮助的东西，它可能是重复的，但请帮助我！

如果我在字段中键入 ‘asd’ ，然后按 GO ，然后继续键入将出现消息 “请匹配所需的格式”

我不想要乱七八糟的代码，我希望它尽可能在html标签中！

 <form id="banner-message">
    <input value=""
    name="email"
    id="inputEmail"
    class="form-control"
    placeholder="email"
    required=""
    autofocus=""
    oninvalid="this.setCustomValidity('Not Valid')"                                               oninput="setCustomValidity('')"
    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">

    <button class="btn btn-lg  btn-block" type="submit">Go</button>
</form>

原文由 ThunderHorn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要使用 onchange 和 this.setCustomValidity

   <form id="banner-message">
      <input value=""
      name="email"
      id="inputEmail"
      class="form-control"
      placeholder="email"
      required=""
      autofocus=""
      oninvalid="this.setCustomValidity('Not Valid')"
      onchange="try{setCustomValidity('')}catch(e){}"
      oninput="setCustomValidity(' ')"
      pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">

      <button class="btn btn-lg  btn-block" type="submit">Go</button>
    </form>

原文由 Hyyan Abo Fakher 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

<form id="banner-message">
    <input value=""
    name="email"
    id="inputEmail"
    class="form-control"
    placeholder="email"
    required=""
    autofocus=""
    oninvalid="this.setCustomValidity('Not Valid')"                                               oninput="setCustomValidity('')"
    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">

    <button class="btn btn-lg  btn-block" type="submit">Go</button>
</form>

原文由 Prince kumar pandit 发布，翻译遵循 CC BY-SA 4.0 许可协议