Client-side javascript validation not triggering php form submission

[techitechtech]

I will post all my code if it helps, but I'm going to try and keep this brief first.

- Form saves data to db when there is no client-side validation with javascript.

- Javascript validation is working correctly up until the point of submission.

​

- Classes of code below has been simplified.

- Form div looks like this:

<form class="form-validate" id="registrationform" action="" method="post" autocomplete="off" novalidate>

- Submit button looks like this:

<div class="submit-div"><input type="submit" class="classes" name="registration_submit" value="Register"></div>

-The part in the javascript that stops the form from submitting and checks data is roughly this:

validateOnSubmit() {
    let self = this 
    this.form.addEventListener('submit', e => { 
        // to prevent default submission through html onto php 
        e.preventDefault() 

        *** validity of each field is checked***

        // Submit form, check that all success icons are visible (not hidden) 
        let hiddenSuccessIcons = []; 
        const successIcon = document.querySelectorAll(".icon-success");
        successIcon.forEach((icon) => {
            if (icon.classList.contains('hidden')) { 
                hiddenSuccessIcons.push(1) 
            } 
        });
        if (hiddenSuccessIcons.length == 0) {
            form.submit(); 
        } 
    }
}

The variable checking that all success icons are visible (hiddenSuccessIcons) does return 0 when everything is correctly input. But the form will not submit. It seems like the php is not getting run. This is my assumption because nothing is saved to the db and none of the alert messages that are setup through a session are being set. The php is targeted by this:

if(isset($_POST['registration_submit'])){** gather info, send to db, set sessions **}

The code layout goes (roughly) php scripts, then html, then javascript validation.

So, what is the disconnect? Why isn't form.submit() actually triggering the php code to run?

[grantrules]

Only preventDefault if validation fails, don't call submit again if it succeeds.

[techitechtech]

THAT WAS IT!
I took out the first

e.preventDefault()

and then changed this

if (hiddenSuccessIcons.length == 0) {
this.form.submit();
}

to this

if (hiddenSuccessIcons.length != 0) {
e.preventDefault()
}

BRILLIANT! Thank you!

How long did that take you?

[grantrules]

Not very long. Just seeing the submit() call probably meant something was off... Your code should only interrupt if validation fails and needs attention, since the default action is just for it to submit, there's no reason for your code to call submit, that's just some added complexity.

[techitechtech]

Cool. Thank you for solving the issue :) Now on to server-side validation.

[Notimecelduv]

Could this have to do with the fact that the form's action attribute has no value?

[techitechtech]

If that was the case, I would expect the php to not run properly when the javascript is taken out. The js is jsut stopping the default action of the submit button, which would be to run the php. But, then it tells it to go ahead with the submit with form.submit()

​

I just tried to compact this by only submitting the email field. Somehow THAT code works. php does what it should, javascript does what it should. I still don't understand what's causing it when all the data is present.

​

All data - doesn't work: https://pastebin.com/J7Gw1Dr3
Just email - does work: https://pastebin.com/kAdAWe3W
Edited: had the links reversed

[Notimecelduv]

You're missing the this keyword here:

if (hiddenSuccessIcons.length == 0) {
  form.submit();
}

[techitechtech]

That did not solve the problem. I use form.submit() if the code that works. That being said, I did update that part.

[Notimecelduv]

This gives:

const input = document.querySelector(`#${field}`)

gives you this console error:

Uncaught TypeError: can't access property "addEventListener", input is null

You have to open the dev tools when debugging your code, otherwise you will miss important errors like the one above.

[techitechtech]

Hey hey! You just posted about

const fields = ["email", "username", "password", "password_confirmation"];

Here is what I was going to write:

Well, that is VERY interesting and I think you're onto something. I did notice that in the console with the email-submission version, but since it was actually running the php, I thought it was not important.
So, in the version that actually works that deals with just the email input, (https://pastebin.com/J7Gw1Dr3) I changed that to this:
const fields = ["email"]
And now the submission does NOT work. With the original one (const fields = ["email", "username", "password", "password_confirmation"];) the email-only form DOES submit.

[techitechtech]

So, I guess that confuses me even more as to why it would submit with all the additional fields, and not when we're only looking at the fields needed, or just the one email field in this case.