Javascript 表單驗證不執行

Question

我有一個輸入框。 提交后，我有一個 PHP 腳本，用於檢查輸入框是否為空。 如果是，它會顯示錯誤消息並運行 Javascript 函數。

我的問題是出現了錯誤消息，但 Javascript 函數沒有執行。

這是我的腳本：

<?php    
if(isset($_POST['submit'])) {

    $username = $_POST['username'];

    if(empty($username)) {
        echo 'Please enter a username';

        echo"
            <script>
            window.onload = function () {
                function validate(e) {
                    var username = document.getElementById('username');
                    if (username.value.trim() == '') {
                        username.classList.add('error');

                        setTimeout(function() {
                            username.classList.remove('error');
                        }, 300);
                        e.preventDefault();
                    }
                }
            }
            </script>
            ";

    }else{
        // something here
    }
}
?>

<form method="post" id="login">
    <input type="text" id="username" name="username">
    <input type="submit" name="submit">
</form>

Answer 1

你的 JavaScript 函數實際上在哪里執行？ 去掉邏輯，你所擁有的結構是：

window.onload = function () {
  function validate(e) {
    //...
  }
}

所以當窗口加載時，你執行一個函數。 該函數無非是定義了另一個函數。 沒有任何東西會執行其他功能。

如果您想在窗口加載時執行該代碼，請不要將其包裝在函數中。 只需執行它：

window.onload = function () {
  // validation logic here
}