javascript - setCustomValidity Bootstrap 保持错误弹出

Question

我在我的应用程序中实现了本地化，所有这些东西都保存在一个 php 文件中。所以我可以轻松做到这一点:

<input class="form-control" type="text" required="" placeholder="username" oninvalid="this.setCustomValidity('<?php echo $this->lang->line('field_required'); ?>')"></input>

现在，如果我不输入任何文本，我可以看到自定义消息，但如果我填写输入，我会再次看到弹出窗口，因为表单无法在其中获取文本。

这是Bootstrap的bug？

示例

https://jsfiddle.net/DTcHh/23662/

Answer 1

使用 onvalid 在 Safari 或 IE 10 以下的某些浏览器中将不起作用。使用自定义事件通知程序来附加该功能。

注意:正如您在 comment 中提到的您可以从 php 的 data-invalid-message 属性打印消息，并通过 .data('invalidMessage') 使用 jQuery 捕获它。

查看工作示例:

var myobj = jQuery('input.form-control');
myobj.on('keyup keypress blur change input', function() {
  var messg = ($(this).data('invalidMessage'));
  if (this.validity.typeMismatch) {
    this.setCustomValidity(messg);
  } else {
    this.setCustomValidity('');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<form>
  <input class="form-control" type="email" required placeholder="username" data-invalid-message="custom message from php here">
  <button type="submit">
    go
  </button>
</form>