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

错误消息未显示的原因是因为您的表单从未提交过。为此，您可以尝试这样的事情：

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

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

＆＃13;

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();
});

＆＃13;

<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>

＆＃13;

Answer 2

在处理程序结束时返回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;
  });

没有提交按钮的HTML5表单验证，其中包含自定义错误消息

2 个答案: