时间戳

首页 > 解决方案 > 如何使用 Javascript 验证和 PHP 处理事件监听器

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

问题描述

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

代码

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

}

标签： javascriptphphtmlcssforms

解决方案

您可以在块中调用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">

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

推荐阅读