Как обрабатывать списки событий, используя проверку Javascript и PHP

Question

Извините, ребята. Я новичок в веб-программировании, будучи студентом, и мне нравится фокусироваться на веб-разработке, но я столкнулся с проблемой. Я попытался использовать проверку 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">

Удаление прослушивателя событий не является хорошей практикой для отправки формы. Если пользователь вводит правильные данные, тогда отправьте форму. Или запретите отправку формы, когда пользователь вводит неверные данные.