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

【问题标题】：How to handle event listerners using Javascript validation and PHP如何使用 Javascript 验证和 PHP 处理事件监听器
【发布时间】：2020-06-28 19:34:07
【问题描述】：

对不起伙计们。作为一名学生，我是 Web 编程的新手，我喜欢专注于 Web 开发，但我发现自己遇到了问题。我尝试使用 JavaScript 验证将表单提交到 PHP 文件，但我尝试了使用事件侦听器来帮助我检查输入字段。我想先检查名字输入是否已填写。事件侦听器有助于避免在未填写名字时提交表单，但是当我填写它时，不会通过单击提交按钮提交表单，而是需要单击两次才能提交表单。问题出在哪里？

HTML 代码

`form method="POST" action="form.php" id="form" > 名字输入类型='text' name='firstName' id="firstName"> 输入类型='提交'值=“提交表单”>`

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);
        }

}

【问题讨论】：

第一次点击时，event.preventDefault(); 阻止表单提交，如果输入通过验证，则移除事件监听器。然后第二次点击，表单不验证，不阻止提交。
在if 语句中写入event.preventDefault()。
@ErickSwai stackoverflow.com/questions/22363838/…

标签： javascript php html css forms

【解决方案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">

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

【讨论】：