入力値が空白の場合はエラーメッセージが表示されません

Question

inputの値が空の場合、submitボタンをクリックすると、JS関数はfalseを返します。しかし、inputが空白スペース" "の場合は、まだ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

あなたは「パターン」属性を使用し、少なくとも一つの文字の正規表現式を指定する必要があります。

てみ

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

上記のパターン

• ゼロ以上のASCII数字
• つのアルファベットASCII文字
• ゼロ個以上の英数字のASCII文字

Answer 2

あなたが実際に検証を行っていません。最初の検証は、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>