如何使用 Javascript 验证和 PHP 处理事件监听器

Question

我喜欢专注于 Web 开发，但我发现自己遇到了问题。我尝试使用 JavaScript 验证，将表单提交到 PHP 文件，但我尝试使用事件侦听器帮助我检查输入字段。我想先检查名字输入是否已填写。事件侦听器有助于避免在未填写名字时提交表单，但当我填写名字时，单击提交按钮不会提交表单，而是需要单击两次才能提交表单。哪里有问题？

HTML代码

`form method="POST" action="form.php" id="form" >

First Name input type= 'text' name= 'firstName' id="firstName">

input type= 'submit' value="Submit Form">`

JavaScript 代码

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

您可以在块中调用submit事件else：var form = document.getElementById("form");form.addEventListener("submit", eventListerners);function eventListerners(event){&nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; var firstName = document.getElementById("firstName");&nbsp; &nbsp; if(firstName.value == ""){&nbsp; &nbsp; &nbsp; &nbsp; alert("Name cannot be empty");&nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; this.submit();&nbsp; &nbsp; }}<form method="POST" action="form.php" id="form" >First Name <input type= 'text' name= 'firstName' id="firstName"><input type= 'submit' value="Submit Form">删除事件监听器并不是提交表单的好习惯。如果用户输入有效数据，则提交表单。或者当用户输入无效数据时阻止表单提交。