如何使用 Javascript 驗證和 PHP 處理事件偵聽器

Question

抱歉，伙計們。我是一名學生的 Web 編程新手，我喜歡專注於 Web 開發，但我發現自己遇到了問題。我嘗試使用 JavaScript 驗證將表單提交到 PHP 文件，但我嘗試使用事件偵聽器幫助我檢查輸入字段。 我想先檢查是否填寫了名字輸入。 事件偵聽器有助於避免在未填寫名字時提交表單，但是當我填寫時，表單不會通過單擊提交按鈕提交，但需要單擊兩次才能提交表單。 問題出在哪兒？

代碼

`form method="POST" action="form.php" id="form" >
First Name input type= 'text' name= 'firstName' id="firstName">
input type= 'submit' value="Submit Form">`

爪哇代碼

var form = document.getElementById("form");
form.addEventListener("submit", eventListerners);


function eventListerners(event){

        event.preventDefault();
        var firstName = document.getElementById("firstName");
        if(firstName.value == ""){
            alert("Name cannot be empty");

        }
        else {
            form.removeEventListener("submit", eventListerners);
        }

}

Answer 1

您可以在else塊中調用submit事件：

 var form = document.getElementById("form"); form.addEventListener("submit", eventListerners); function eventListerners(event){ event.preventDefault(); var firstName = document.getElementById("firstName"); if(firstName.value == ""){ alert("Name cannot be empty"); }else{ this.submit(); } }

 <form method="POST" action="form.php" id="form" > First Name <input type= 'text' name= 'firstName' id="firstName"> <input type= 'submit' value="Submit Form">

刪除事件偵聽器不是提交表單的好習慣。 如果用戶輸入有效數據，則提交表單。 或者在用戶輸入無效數據時阻止表單提交。