setCustomValidity Bootstrap 保持错误弹出答案

【问题标题】：setCustomValidity Bootstrap keep error popupsetCustomValidity Bootstrap 保持错误弹出
【发布时间】：2016-12-20 19:09:08
【问题描述】：

我已经在我的应用程序中实现了本地化，所有这些东西都保存在一个 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/

【问题讨论】：

即使在输入文本后我也能看到弹出窗口。
@Iceman 事实上，这就是问题
如果您对另一种方法感兴趣。 oninvalid 不是跨浏览器 gr8。例如。 safari 不支持。
@Iceman 哪个方法？请告诉我，我也找到了解决方法，请检查我的答案，但希望看到最佳答案。
当然。我会添加一个答案

标签： javascript php html twitter-bootstrap

【解决方案1】：

使用onvalid 无法在 Safari 或 IE 等 10 以下的某些浏览器中使用。使用自定义事件通知器来附加该功能。

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

查看工作示例：

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>

【讨论】：

呃为什么我看不到文字please enter valid email?
这将捕获像 ctrl+v 或 cmd+v 或 right-click>paste 这样的事件，它不适用于按键。
js中有一个命令可以让我将弹出窗口调用显示为：inputId.showCustomValidity() ?

【解决方案2】：

我发现的解决方法是：

onkeyup="this.setCustomValidity('');

该错误现在将消失。

【讨论】：

【解决方案3】：

TL&DR 检查element.validity.typeMismatch，然后检查element.setCustomValidity('custom error msg') 或element.setCustomValidity('')，如果没有不匹配。您应该同时监听 keyup 和 blur 事件。

Mozilla 开发者文档中关于setCustomValidity 的解释：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation#Customized_error_messages。

但如果焦点不在我们正在修改的输入框内，则仅 keyup 将无法正常工作。

我们之前的例子不会传递输入框的当前状态如果用户将鼠标移开并单击页面上的其他位置。我们更新组件的 values 属性仅在用户按下 Enter 时焦点在输入框内。

让我们通过监听输入框的模糊事件来解决这个问题。

以上来自 Angular 2 文档：用户输入，段落“模糊”https://angular.io/docs/ts/latest/guide/user-input.html。

简化示例

以下是来自 Mozilla 文档的示例，其中添加了 blur keyEvent 侦听器。是的，需要重构，但我在 Angular 2 中的版本看起来大不相同，你的可能也会如此。

<form>
  <label for="mail">I would like you to provide me an e-mail</label>
  <input type="email" id="mail" name="mail">
  <button>Submit</button>
</form>

然后

var email = document.getElementById("mail");

email.addEventListener("keyup", function (event) {
  if (email.validity.typeMismatch) {
    email.setCustomValidity("I expect an e-mail, darling!");
  } else {
    email.setCustomValidity("");
  }
});

email.addEventListener("blur", function (event) {
  if (email.validity.typeMismatch) {
    email.setCustomValidity("I expect an e-mail, darling!");
  } else {
    email.setCustomValidity("");
  }
});

【讨论】：