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

【问题标题】：show alert when textbox input is empty当文本框输入为空时显示警报
【发布时间】：2020-01-15 09:36:11
【问题描述】：

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

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>

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

【问题讨论】：

getElementById 拼写错误。您已输入代码 getElementByID 但它应该是 getElementById

标签： javascript html input textbox

【解决方案1】：

您的代码中有两个问题：

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>

【讨论】：

【解决方案2】：

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>

【讨论】：