form sending undefined

[Andrew Poulos]

I have a simple form with two input fields (one of type email and the
other a text area) and when users select Submit I do a simple check to
make sure that both fields have been filled in. For the email field:

val = h.elements['email'].value.replace(/\s/g,"");

if (val == "") {
err = "You need to include your email.";
}

And on modern browsers the email field is self validates.

In all the testing I've done on multiple browsers in multiple
environments it works as expected but about 5% of the emails it
generates have the value
undefined
for both inputs.

How do the values become undefined?

Andrew Poulos

[JJ]

Are you sure those are the only relevant code? Cause I'm guessing that other
code is causing it.

[Evertjan.]

Andrew Poulos <ap_...@hotmail.com> wrote on 17 Jan 2017 in
comp.lang.javascript:

They could be empty, but not undefined,
unless you made some mistake in the code not shown.

regex replace() and then compare to ""?
Why not use regex test()?

try [tested]:

<form onsubmit = 'return testForm(this)'>
<input type='email' name='myEmail'>
<input type='text' name='myText'>
<input type='submit'>
</form>

<script type='text/javascript'> 'use strict'
function testForm(t) {
var okE = /[^\s]/.test(t.elements['myEmail'].value);
var okT = /[^\s]/.test(t.elements['myText'].value);
if (!okE) alert("You need to include your email-ADDRESS");
if (!okT) alert("You need to give some text");
return okE && okT;
};
</script>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Thomas 'PointedEars' Lahn]

Andrew Poulos wrote:

> I have a simple form with two input fields (one of type email and the
> other a text area) and when users select Submit I do a simple check to
> make sure that both fields have been filled in. For the email field:
>
> val = h.elements['email'].value.replace(/\s/g,"");

\s+ is more efficient.

>
> if (val == "") {
> err = "You need to include your email.";
> }

if (!/\S/.test(val))

without the assignment before, is more efficient.

If your purpose is to trim leading and trailing whitespace as well, you
should use

var err;

var email = h.elements['email'].value;
email = (typeof email.trim == "function"
? email.trim()
: email.replace(/^\s+|\s+$/g, ""));

if (!/\S/.test(email)) {
err = "You need to include your e-mail address.";
}

[The variable identifier should be indicative of the variable value.
Also, “e(-)mail” is the name of the technology and the message, not
of the address.]

See the FAQ. Or polyfill String.prototype.trim() if necessary and just call
.trim().

> And on modern browsers the email field is self validates.

Do you mean the “pattern” attribute in HTML5?

> In all the testing I've done on multiple browsers in multiple
> environments it works as expected but about 5% of the emails it
> generates have the value
> undefined
> for both inputs.
>
> How do the values become undefined?

There is no way that this code can cause the “undefined” value.
The problem must be in the code that you have not posted.

A possibility for an “undefined” value as the result is if you forgot the
second argument to String.prototype.replace(). It happened to me recently.

--
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[Andrew Poulos]

On 18/01/2017 2:16 AM, Thomas 'PointedEars' Lahn wrote:

> Andrew Poulos wrote:

>> How do the values become undefined?
>
> There is no way that this code can cause the “undefined” value.
> The problem must be in the code that you have not posted.

Looking through everything again one of the fields had an id and name of
"name" and at a guess that is probably an unsafe name.

Still I found your and Evertjan's code for testing the values very useful.

Andrew Poulos

[Thomas 'PointedEars' Lahn]

Andrew Poulos wrote:

> On 18/01/2017 2:16 AM, Thomas 'PointedEars' Lahn wrote:
>> Andrew Poulos wrote:
>>> How do the values become undefined?
>> There is no way that this code can cause the “undefined” value.
>> The problem must be in the code that you have not posted.
>
> Looking through everything again one of the fields had an id and name of
> "name" and at a guess that is probably an unsafe name.

Yes, if you attempt to access the “name” property of the “form” element
object. Because legacy DOM support will make that property inaccessible in
favor to shorthand access to a form control with name or ID “name” in that
form:

| > $0.name
| <input name=​"name">​

(when will they finally remove support for the ambiguous shorthand and fix
this?). The same as naming a form control “submit” will make the “form”
element object’s submit() method inaccessible:

| > $0.submit
| <input name=​"submit">​
|
| > $0.submit()
| Uncaught TypeError: $0.form.submit is not a function(…)

[$0 is an expression referring to to the element object representing the
node selected in the Element’s panel of several browser developer tools,
including Chrome DevTools where this was tested.]

However, I do not see an intrinsic relationship between your “undefined”
result and unsafe naming.

[Thomas 'PointedEars' Lahn]

Andrew Poulos wrote:

> On 18/01/2017 2:16 AM, Thomas 'PointedEars' Lahn wrote:
>> Andrew Poulos wrote:
>>> How do the values become undefined?
>> There is no way that this code can cause the “undefined” value.
>> The problem must be in the code that you have not posted.
>
> Looking through everything again one of the fields had an id and name of
> "name" and at a guess that is probably an unsafe name.

Yes, if you attempt to access the “name” property of the “form” element
object. Because legacy DOM support will make that property inaccessible in
favor to shorthand access to a form control with name or ID “name” in that
form:

| > $0.name
| <input name=​"name">​

(when will they finally remove support for the ambiguous shorthand and fix
this?). The same as naming a form control “submit” will make the “form”
element object’s submit() method inaccessible:

| > $0.submit
| <input name=​"submit">​
|
| > $0.submit()

| Uncaught TypeError: $0.submit is not a function(…)

[$0 is an expression referring to to the element object representing the
node selected in the Element’s panel of several browser developer tools,
including Chrome DevTools where this was tested.]

However, I do not see an intrinsic relationship between your “undefined”
result and unsafe naming.

[Andrew Poulos]

In fact last night the client just got another email with undefined so
it is something else. Dang, I'll keep looking.

Andrew Poulos