當文本框輸入為空時顯示警報

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

您的代碼中有兩個問題：

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>

Answer 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>