Question

我正在尝试以简单的搜索形式重复使用HTML5验证required（所以一个输入）。这正是我所需要的（浏览器语言中的验证消息，样式，不允许进展等）。我缺少的是修剪输入字符串，因此不允许用户只提交空格。

我已经进行了研究，onsubmit事件似乎为时已经触及修改任何事情。我不能对实际输入进行任何更改，因此在整个过程中必须保持完整（与经典验证一样）。

有没有办法用vanilla HTML5解决它而不使用像jQuery这样的库？

修改：使用pattern属性不是此处的解决方案，因为它的错误消息与this field cannot be empty不同。

Answer 1

你可以尝试一下

<form method = "post">
    <input type = "text" required pattern=".*[^ ].*" oninvalid="setCustomValidity('Please fill out this field')"
    onchange="try{setCustomValidity('')}catch(e){}"/>
    <input type = "submit" />
</form>

否则，如果你真的，真的只需要使用required属性，那么这样的东西对你有用

<form method = "post">
    <input type = "text" required oninput = "if(this.value.trim() == '') { this.value = '' }"/>
    <input type = "submit" />
</form>

Answer 2

您可以使用onsubmit，如果它不验证，您只需要返回false

<form onsubmit="return check()">
  Enter name: <input type="text" id="myinput">
  <input type="submit">
</form>

<script>
 function check(){
  if(document.getElementById("myinput").value.trim().length ==0){
    return false;
  }
  return true;
 }
</script>

如何在验证之前修改HTML5表单数据？

2 个答案: