现在你可以使用HTMLFormElement.reportValidity（）方法，目前它在除Internet Explorer之外的大多数浏览器中实现（请参阅浏览器兼容性在MDN）.它报告有效性错误而不触发submit事件，并且它们以相同的方式显示.

var applicationForm = document.getElementById("applicationForm");    
if (applicationForm.checkValidity()) {
  applicationForm.submit();
} else {
  applicationForm.reportValidity();
}

reportValidity（）方法将触发HTML5验证消息。

这个问题是问了一年多前，但这是一个很好的问题，我最近遇到的，以及...
我的解决方案是使用JavaScript在每个包含validationMessage的<input>、<select>和<textarea>的<label>上创建一个属性（我使用"data-invalid"）。
然后一些CSS ...

label:after {
    content: attr(data-invalid);
   ...
}

...显示错误消息。

• • 限制**

这只在每个元素都有标签的情况下才有效，如果你把属性放在元素本身上就无效了，因为<input>元素不能有:after伪元素。

• • 演示**

http://jsfiddle.net/u4ca6kvm/2/

正如@Diego所教导的，你可以使用form.reportValidity（）;
要支持IE和Safari包括这个polyfill，它只是工作：

if (!HTMLFormElement.prototype.reportValidity) {
    HTMLFormElement.prototype.reportValidity = function() {
      if (this.checkValidity()) return true;
      var btn = document.createElement('button');
      this.appendChild(btn);
      btn.click();
      this.removeChild(btn);
      return false;
    }
}