Question

所以我需要的只是当我的html5验证失败时出现的警报，例如：

alert("Error, please fill all required fields before submitting.");

我是否可以使用某种事件来使用JavaScript或jQuery显示此警报？

这看起来非常基本，但我在网上找不到任何关于它的信息。我所能找到的只是改变直接出现在该字段上的弹出消息的方法。

我需要这个，因为我的表单跨越多个标签，因此显示错误消息的气泡可能并不总是出现，具体取决于用户提交表单时的位置。

Answer 1

如果未通过验证，则会在输入上触发invalid事件： https://developer.mozilla.org/en-US/docs/Web/Events/invalid

使用jQuery你可以这样做：

$('input[required]').on('invalid', function(e){
  alert("Error, please fill all required fields before submitting.");
});

http://jsfiddle.net/644Lou8k/1/

Answer 2

对于那些不想使用jQuery的人：

＆＃13;

var requiredInput = document.getElementById('requiredField');

function showAlert(){
  alert("Error, please fill all required fields before submitting.");
}

requiredInput.addEventListener("invalid", showAlert, false);

＆＃13;

<form action="">
  <input id="requiredField" type="text" placeholder="Required input" required>
  <button type="submit">Submit</button>
</form>

＆＃13;

Answer 3

您可以使用javascript捕获表单提交事件，并在允许值通过之前验证/检查值。

$('form').submit(function () {
  if($('#blah').val() == "") {
    alert('blahblah');
    return false;
  }
});

Answer 4

HTML5验证在用户提交表单时启动，并且不会引发任何事件。唯一的方法就是像许多其他人在答案中提到的那样拥有自己的JS验证。这是一个很好的答案HTML5 required validation not working

HTML5表单验证过程仅限于以下情况表单正在通过提交按钮提交。表格提交算法明确表示在执行时不执行验证表单是通过submit（）方法提交的。显然，这个想法是如果您通过JavaScript提交表单，那么您应该这样做验证

html5验证失败时发出警报

4 个答案: