How to handle event listerners using Javascript validation and PHP

Question

Sorry guys.I'm new in Web Programming as a Student and I like like to focus on Web Development but I found myself in a problem.I tried using JavaScript validation with the form being submitted to a PHP file but i tried using event listeners to help me checking the input field. I wanted to check first if the first name input is filled or not. The event listener help to avoid the form being submitted when the first name is not being filled but when i filled it, the form wont be submitted with a single click to the submit button but needs two clicks for the form to be submitted. Where is the problem?

HTML CODE

`form method="POST" action="form.php" id="form" >
First Name input type= 'text' name= 'firstName' id="firstName">
input type= 'submit' value="Submit Form">`

JAVASCRIPT CODE

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

}

On the first click, `event.preventDefault();` prevents the form submission, and if the input passes the validation, the event listener is removed. Then on the second click, the form is not validated, and the submission is not prevented. — Teemu, Mar 17 '20 at 17:18
@ErickSwai https://stackoverflow.com/questions/22363838/submit-form-after-calling-e-preventdefault/22363966 — Wax, Mar 17 '20 at 17:37

score 0 · Accepted Answer · answered Mar 17 '20 at 18:41

You can call submit event in else block:

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

Removing event listener is not good practice for submitting form. If user enters valid data then submit form. Or prevent form submission when user enters invalid data.

How to handle event listerners using Javascript validation and PHP

1 Answers1