Learn-to-send-email-via-google-script-html-no-server: validEmail() function passes a blank email address

[divalentSilver]

Hi everything works fine but there's one problem.
I found that if I just press the send button without writing any words in the form, the email is sent.
So, I modified validEmail() function from _form-submission-handler.js_ something like this:

function validEmail(email) {
        if (!email || 0 === email.length){
            return false;
        }
        else {
            var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
            return re.test(email);
        }
    }

But still, it doesn't work.
Then, I just commented a single line from the original _form-submission-handler.js_ like this:

function validEmail(email) {
        //var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
        return re.test(email);
    }

Weird, the invalid email address warning pop-up is shown.
I feel like any modification of the _form-submission-handler.js_ file isn't reflected at all.
What is the problem? Anyone can help? Please...

[mckennapsean]

Yeah that would mean the validEmail function is not triggering (or at least, you should see an error message in the console, since re is not defined...).

You could debug Javascript file, specifically put a breakpoint in the loaded function when the page first loads. See how many forms it finds. If it doesn't find any forms, then none of the rest of the code (you need class=gform). Otherwise, debug handleFormSubmit() when you hit submit. Specifically, see if data.email is defined. It does look like there is a bug when the email is the empty string currently as you noted. However, Chrome doesn't let me submit the form without at least some string in that field so not sure if it is an issue in most browsers.

[mckennapsean]

@divalentSilver did you have any luck tracking down a fix here?

[divalentSilver]

@mckennapsean

nope... It still doesn't work.

[mckennapsean]

So I believe the browser has some checks for emails, and I am thinking that you are not actually using using/calling that email validation check.

For example, on our demo form, if I fail to put in an email, this pops up:

But, when I have a longer email that meets Chrome's definition of an email (see the image), then I get our custom error message.

Making this an email field is probably sufficient for email checking TBH, so we could probably remove the extra logic since most sane browsers handle this fine enough.

Which error messages were you getting? My hunch is that the clientside JS is not applied to your form so that your changes to the Javascript were not taking any effect. I would have expected a console error in your example code since a variable is undefined.

[divalentSilver]

@mckennapsean

Oh, in my case, the pop-up alert saying "Please fill out this field" doesn't show up.
If I just leave all the fields in blank and click on the submit button, the form is just sent without any values(see the console log below). There aren't any error messages.

{name: "", email: "", subject: "", message: "", g-recaptcha-response: "03A..(omitted)..Q_OkvjX", …}
email: ""
formDataNameOrder: "["name","email","subject","message","g-recaptcha-response"]"
formGoogleSendEmail: ""
formGoogleSheetName: "responses"
g-recaptcha-response: "03AOLTBLS0w..(omitted)..a-Q_OkvjX"
message: ""
name: ""
subject: ""
__proto__: Object

Also, I am actually using/calling that email validation check because I can see the console log message that I added(see the code below) in the console.

 function loaded() {
        console.log("Contact form submission handler loaded successfully!");
        ....(omitted)...
 }

[mckennapsean]

So when the field is marked as required in the form, the browser prevents me from submitting the form without at least some text in that field. This behavior was the same for Chrome, FIrefox, & Edge.

What browser are you using? Is that field not marked as required in the HTML? Is it marked as an email type?

[divalentSilver]

@mckennapsean Oops I forgot to mention it and I'm sorry to respond late. I am using Chrome too. And what does it mean you say this: "Is that field not marked as required in the HTML? Is it marked as an email type?"

[mckennapsean]

The attribute "required" on the HTML form element. The type should be email. Chrome already prevents those both from being an empty string from what I can tell.

[mckennapsean]

Did that make sense @divalentSilver ? I cannot reproduce in any Chrome environment, even mobile that warning appears if the email field is required and empty.

[mckennapsean]

Also, see #327 for a PR to remove the email validation outright.

[mckennapsean]

Thanks for the issue - we removed our custom logic around email in the form, and now it is up to the browser and however they implement the check, which if there is a bug there I'd suggest filing it with the respective browser. Let me know if there are any other thoughts/suggestions here. Thanks!