如何更改默认的“请在电子邮件地址中包含@”？

Question

我正在尝试更改电子邮件无效时 "setCustomValidity" 引发的默认错误消息。

我无法访问源代码。我的假设是源以某种方式调用了 setCustomValidity;只是因为错误消息的外观。这是源元素：

<input type="email" value="" name="customer[email]" id="email" class="large" size="30">

我只能使用外部 JavaScript/css 文件注入任何更改。

我可以想到两种解决方案。

解决方案 1： 我正在尝试使用 JS 注入内联 HTML 元素，这会导致类似这样的结果。

<input type="email" value="" name="customer[email]" class="large" size="30" oninvalid="this.setCustomValidity('Please Enter valid email')" oninput="setCustomValidity('')">

我是 JS 新手，我很难弄清楚如何在外部 JS 文件中实现 HTML。

解决方案 2： 像这样调用 error_message.js 中的 oninvalid 和 setCustomValidity DOM 方法：

function emailValidity(){
    var myInput = document.getElementByName("customer[email]");
    myInput.oninvalid = function() { 
                (errorMessage) 
            };
    function errorMessage(){
        myInput.setCustomValidity("hey! the email isn't right");
    }
    }

但是这个文件即使在被包含之后也无法覆盖默认消息！

感谢任何帮助。提前谢谢你。

Answer 1

此外，您必须在同一元素上调用 reportValidity 方法，否则不会发生任何事情。

HTMLObjectElement.setCustomValidity

function validate(input) {

  var validityState_object = input.validity;

  console.log(validityState_object)

  if (validityState_object.typeMismatch) {
    input.setCustomValidity('Thats not an email!');
    input.reportValidity();
  } else {
    input.setCustomValidity('');
    input.reportValidity();
  }
}

document.querySelector('#email').addEventListener('blur', e =>
  validate(e.target)
)

<input type="email" value="" id="email">

Answer 2

只需以大致相同的方式设置 input 和 invalid 事件侦听器即可。

const input = document.querySelector('input');
input.oninput = () => input.setCustomValidity('');
input.oninvalid = () => input.setCustomValidity('Please Enter valid email');

<form>
<input type="email" value="" name="customer[email]" class="large" size="30">
</form>

Answer 3

您的代码没有工作，因为它不在表单中。表单需要一个提交按钮来检查输入并在必要时显示错误消息，所以我添加了。

另外，当它应该是 getElementsByName 时，你有 getElementByName，稍后 [0] 索引来选择元素。

除此之外，您每次用户尝试提交时都尝试设置有效性，而只需要设置一次。

试试这个：

var myInput = document.getElementsByName("customer[email]")[0];
myInput.oninvalid = function() {
  myInput.setCustomValidity("Hey! the email isn't right")
};

<form>
  <input type="email" name="customer[email]" id="email" class="large" size="30">
  <input type="submit" onsubmit="emailValidity()">
</form>