没有带有自定义错误消息的提交按钮的 HTML5 表单验证

Question

我在不使用提交按钮的情况下无法显示 html5 内联验证气泡。我不能使用 jQuery，只能使用 vanilla javascript。

这是我的html：

<a id="send" href="#">Send</a>

<form id="sendform" action="">
  <input type="email" placeholder="E-mail" id="email-add" required>
</form>

这是我的 javascript：

var btn = document.getElementById('send');
var emailField = document.getElementById('email-field');

btn.addEventListener('click',function() {
  // remove validation message
  emailField.setCustomValidity('');

  if (!emailField.validity.valid) {
    // set custom validation message
    emailField.setCustomValidity('Custom error message!');
    // add CSS class
    emailField.className = 'invalid';
  }
});

点击锚点时，我想用自定义消息触发验证气泡，但气泡没有出现。如果我在表单中使用提交按钮，就会出现气泡。

这里是一个例子：https://jsfiddle.net/esedic/rc8va4vf/

有什么想法吗？

Answer 1

只需在处理程序末尾返回 true 或 false。查看此链接

HTML tag <a> want to add both href and onclick working

您的代码正在处理这 1 行更改。

 btn.addEventListener('click',function() {


  // remove validation message
  emailField.setCustomValidity('');

  if (!emailField.validity.valid) {
    // set custom validation message
    emailField.setCustomValidity('Custom error message!');
    // add CSS class
    emailField.className = 'invalid';
  }
  return false;
  });

Answer 2

错误消息未显示的原因是您的表单从未提交。 为了做到这一点，你可以尝试这样的事情：

https://jsfiddle.net/2gs6hx7q/6/

html表单需要通过提交按钮提交，诀窍是创建一个隐藏的submuit按钮，当a元素被点击时会被点击

var btn = document.getElementById('send');
var emailField = document.getElementById('email-add');
var myForm = document.getElementById('sendform');

emailField.oninvalid = function(e) {
  e.target.setCustomValidity("");
  if (!e.target.validity.valid) {
    e.target.setCustomValidity("Error message");
  }
};

emailField.oninput = function(e) {
  e.target.setCustomValidity("");
};

btn.addEventListener('click',function(e) {
	document.querySelector('#submitBtn').click();
});

<a id="send" href="#">Send</a>

<form id="sendform" method="POST" name="sendform" onsubmit="return false;">
  <input type="email" placeholder="E-mail" id="email-add" required>
  <input type="submit" id="submitBtn" style="display:none;">
</form>