当文本框输入为空时显示警报

Question

我想在名字的文本框输入为空时显示提醒。

Javascript代码

<script>
    function validation() {
        var fname = document.getElementByID("fname").value;
        if ( fname== "")
            alert("Enter First Name");
    }
</script>

HTML代码

    <form>
        First name:
        <input type="text" id="fname">
        <br/><br/>
        <button id="btnSubmit" onclick="validation()">Submit</button>
        <button id="btnReset">Reset</button><br/>
        <button id="btnMenue"><a href= "index.php">Menue</a></button>
    </form>

我已经尝试过相关文章，但没有解决我的问题。

Answer 1

document.getElementByID is not a function，你的代码中有一个类型：

getElementByID <- 你代码中的最后一个字母很大，应该很小 getElementById

工作示例

function validation() {
  //                               big D, throws error 
  // var fname = document.getElementByID("fname").value;
     var fname = document.getElementById("fname").value;
  console.log(fname);
  if (fname == "")
    alert("Enter First Name");
}

<form>
  First name:
  <input type="text" id="fname"><br/><br/>

  <button id="btnSubmit" onclick="validation()">Submit</button>
  <button id="btnReset">Reset</button><br/>
  <button id="btnMenue"><a href= "index.php">Menue</a></button>
</form>

Answer 2

您的代码中有两个问题：

getElementByID 应该是 getElementById
您需要捕获事件对象并对其调用 preventDefault 以停止停止表单提交的默认行为。

function validation(e) {

  var fname = document.getElementById("fname").value; // Typo here ID should be Id.
  if (fname == "") {
    e.preventDefault();
    alert("Enter First Name");
  }

}

<form>
  First name:
  <input type="text" id="fname"><br/><br/>
  <button id="btnSubmit" onClick="validation(event)">Submit</button>
  <button id="btnReset">Reset</button><br/>
  <button id="btnMenue"><a href= "index.php">Menue</a></button>
</form>

当文本框输入为空时显示警报

show alert when textbox input is empty

html

javascript

textbox

input