如何使用 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){

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

删除事件监听器并不是提交表单的好习惯。如果用户输入有效数据，则提交表单。或者当用户输入无效数据时阻止表单提交。