当文本框为空时显示警报

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>

我尝试了相关文章，但它们没有解决我的问题。

- Poo

---

"getElementById" 拼写错误了。您在代码中输入了 "getElementByID"，但应该是 "getElementById"。 - Not A Bot

Answer 1

你的代码存在两个问题：

1. getElementByID 应该改为 getElementById
2. 你需要捕获事件对象并在其上调用 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>

- Archie

Answer 2

document.getElementByID不是一个函数，您的代码中存在拼写错误：

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>

- qiAlex