如果输入值只是空白，则不会出现错误消息 space

Question

如果 input 值为空，我的 JS 函数 returns false 当我单击 submit 按钮时。但是，如果 input 只是空白 space " " 它仍然会返回 false 但错误消息和 input text border color 不会像输入值为空时那样显示""。

HTML

<form>
  <input id="textbox" type="text" required/>
  <input type="submit" id="btnSubmit" value="Save" />
</form>

JavaScript

var input = document.getElementById("textbox").value.trim();

if (input.length == 0) {

    return false;
}

Answer 1

您实际上并没有在进行验证。使用 HTML5 required 属性时会进行第一次验证。所以你实际上并没有使用 JS 代码。我认为这就是您要实现的目标：

function checkInput(){
  var input = document.getElementById("textbox").value;
  if (input === '') {
      document.getElementById('error_message').style.display = 'block';
      document.getElementById('textbox').style.borderColor  = '#F00';
      return false;
  }else{
      document.getElementById('error_message').style.display = 'none';
      document.getElementById('textbox').style.borderColor  = '#000';
  }
}

#error_message{
  display: none;
}

<form method='post'>
  <input id="textbox" type="text"/>
  <input type="submit" id="btnSubmit" value="Save" onclick='checkInput();'/>
  <p id='error_message'>
  error message
  </p>
</form>

Answer 2

您需要使用 'pattern' 属性并为至少一个字符指定正则表达式。

尝试

<input id="textbox" type="text" pattern="^\d*[a-zA-Z][a-zA-Z0-9]*$" required/>

以上模式

零个或多个 ASCII 数字
一个字母 ASCII 字符
零个或多个字母数字 ASCII 字符

如果输入值只是空白，则不会出现错误消息 space

Error message does not appear if input value is just blank space

html

javascript

input

requiredfieldvalidator