用字段下的消息替换 html5 气泡消息答案

【问题标题】：Replace html5 bubble messages with message under fields用字段下的消息替换 html5 气泡消息
【发布时间】：2017-09-11 11:54:48
【问题描述】：

我有以下代码，我希望在错误字段下方显示消息而不是气泡。我应该对我的代码添加什么？

<script type="text/javascript">
  $(document).ready(function() {

    $('#emailform').submit(function(event) {
        event.preventDefault();

        $.ajax({
            backedn validation

          }
        });

    });
  });
</script>

<body>
  <form id="emailform" class="laform" method="post" action="*.php">


    <label>Email*: </label>

    <input type="email" name="email" id="email" class="input" required oninvalid="this.setCustomValidity('The email address you entered is not valid')" oninput="this.setCustomValidity('')" onchange="try{setCustomValidity('')}catch(e){}">

    <label class="col-md-12 labelcom">MSG</label>


    <textarea class="input2" name="comment" id="comment" required oninvalid="this.setCustomValidity('This field is mandatory')" oninput="this.setCustomValidity('')" placeholder="Enter your comments / suggestions..."></textarea>

    <button type="submit" class="btn" name="submit" value="submit">SUBMIT</button>


  </form>
</body>

【问题讨论】：

标签： javascript html jquery jquery-events

【解决方案1】：

无法覆盖 HTML required 消息。 More Information.

只需使用 Javascript 并创建自己的验证检查并在验证失败时在元素下附加消息。

编辑：在进行更多研究后，我发现另一个 SO post 包含更多有见地的信息。

显然，这是可能的。但是你必须使用 Javascript。

此代码更改 HTML required 提供的验证框的消息。您可能应该查找浏览器支持。

document.getElementById("input").setCustomValidity("Message");

【讨论】：