如何更改最小和最大的HTML5表单验证默认错误消息?

时间:2018-04-17 18:32:53

标签: javascript html html5 validation

我找到了这个答案,用于更改无效值How can I change or remove HTML5 form validation default error messages?的错误消息。

我需要显示不同的消息,其值小于最小值且大于最大值

<input type="number" name="test" step="any" min="0.01" max="10.0">

如果用户输入-1,则应该说&#34;请输入正值&#34;。

如果用户输入20,则应该说&#34;值不能超过10&#34;。

2 个答案:

答案 0 :(得分:0)

可能有一些奇特的API驱动方式,但如果输入与title不匹配时显示pattern,则只需修改title即可1}}改变。

为了支持小数,你需要一些更高级的正则表达式。

*我添加了form代码,因此验证可以在代码段中使用

&#13;
&#13;
document.querySelector('input').addEventListener('change', (e) => {
  if (e.target.value > 10) {
    e.target.setAttribute('title', "Value cannot be more than 10");
  } else if (e.target.value < 0) {
    e.target.setAttribute('title', "Please enter a positive value");
  } else {
    e.target.setAttribute('title', "Please enter a number");
  }
})
&#13;
<form><input type="text" required="" pattern="10|[0-9]" value="" title="This is an error message" /></form>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

通过HTML5表单验证(来自您的链接),您可以使用invalid元素上的input事件侦听器来使用自定义消息。

&#13;
&#13;
var myInput = document.getElementById("myInput");
myInput.addEventListener("invalid", validate);
myInput.addEventListener("keyup", validate);

function validate() {
  var val = parseFloat(this.value);
  var min = parseFloat(this.min);
  var max = parseFloat(this.max);
  
  if (val < min) {
    this.setCustomValidity('Please enter a positive number');
  } else if (val > max) {
    this.setCustomValidity('Value cannot be more than ' + max);
  } else {
    this.setCustomValidity("");
  }
}
&#13;
<form>
  <input id="myInput" type="number" name="test" step="any" min="0.01" max="10.0">
  <button type="submit">Submit</button>
</form>
&#13;
&#13;
&#13;