Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #23828 > unrolled thread

Check an input field type='email' has validated successfully

Back to article view | Back to comp.lang.javascript

Contents

  Check an input field type='email' has validated successfully anthony.glazebrook@gmail.com - 2014-04-10 10:29 -0700
    Re: Check an input field type='email' has validated successfully "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-04-10 20:24 +0200
    Re: Check an input field type='email' has validated successfully Denis McMahon <denismfmcmahon@gmail.com> - 2014-04-10 20:49 +0000
      Re: Check an input field type='email' has validated successfully Jukka Lahtinen <jtfjdehf@hotmail.com.invalid> - 2014-04-11 18:37 +0300
        Re: Check an input field type='email' has validated successfully Christoph Michael Becker <cmbecker69@arcor.de> - 2014-04-11 18:12 +0200
        Re: Check an input field type='email' has validated successfully Denis McMahon <denismfmcmahon@gmail.com> - 2014-04-11 22:51 +0000
    Re: Check an input field type='email' has validated successfully Andreas Bergmaier <andber93@web.de> - 2014-04-11 01:29 +0200
      Re: Check an input field type='email' has validated successfully "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-04-11 09:01 +0200
      Re: Check an input field type='email' has validated successfully Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-04-11 11:02 +0200
        Re: Check an input field type='email' has validated successfully Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-04-11 11:48 +0200

#23828 — Check an input field type='email' has validated successfully

I have an input form including an HTML5 <input type="email"> field. 

When the user arrives at the page, the 'submit' button is disabled. When they have entered the information correctly, I'd like to enable the 'submit' button. Is there any way to check the input field has correctly validated without re-checking using a regular expression?

[toc] | [next] | [standalone]

#23838

anthony.glazebrook@gmail.com wrote on 10 apr 2014 in comp.lang.javascript:

> I have an input form including an HTML5 <input type="email"> field. 
> 
> When the user arrives at the page, the 'submit' button is disabled. When
> they have entered the information correctly, I'd like to enable the
> 'submit' button. 

You better disable the submission, not the submit button.

<form onsubmit='return false'>

> Is there any way to check the input field has correctly
> validated without re-checking using a regular expression? 

No, the only valid test of an emailaddress 
is the reception thereof by the intended "to"-person.

Don't know what you mean by "without re-checking"!

A partial test is easy like:

<form onsubmit='return 
/^[^@]+@[^@]{3,}$/.test(this.form.myEmailField.value'>

but can be made nonsensically more complex. 



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

[toc] | [prev] | [next] | [standalone]

#23841

On Thu, 10 Apr 2014 10:29:45 -0700, anthony.glazebrook wrote:

> Is there any way to check the input field has correctly
> validated without re-checking using a regular expression?

The only "validation" you can do on an email address is to verify that it 
matches some predefined format specification of what an email address 
should look like. You can't truly validate it, because the only true 
validation of an email address is to verify that the recipient actually 
receives email, and javascript in itself can't do that.

There are a lot of javascript solutions for verifying the format of an 
email address. Many of them have flaws. There may be a perfect one, but 
I've never found it.

The most you can do in javascript is make an ajax call to a server that 
tries to send a test message to the recipient, and reports the status of 
that attempt back, but that's not 100% foolproof, as it only verifies 
that the an upstream (or downstream) mta accepts the email, it doesn't 
truly confirm that the destination mailbox actually exists.

The best easy check in javascript is probably that the email address 
given contains no spaces, one and only one "@" symbol, and at least one 
period on the right hand side of the "@". You can get more complex, the 
more complex you get the higher the risk of rejecting a valid email 
address.

-- 
Denis McMahon, denismfmcmahon@gmail.com

[toc] | [prev] | [next] | [standalone]

#23855

Denis McMahon <denismfmcmahon@gmail.com> writes:

> The best easy check in javascript is probably that the email address 
> given contains no spaces, one and only one "@" symbol, and at least one 
> period on the right hand side of the "@". You can get more complex, the 
> more complex you get the higher the risk of rejecting a valid email 

I think it's also safe to check that there is at least one alphanumeric
character before the @, at least one more between the @ and the last
period, and at least two after the last period.
Anything stricter than that will probably reject some valid addresses.

-- 
Jukka Lahtinen

[toc] | [prev] | [next] | [standalone]

#23859

Jukka Lahtinen wrote:

> Denis McMahon <denismfmcmahon@gmail.com> writes:
> 
>> The best easy check in javascript is probably that the email address 
>> given contains no spaces, one and only one "@" symbol, and at least one 
>> period on the right hand side of the "@". You can get more complex, the 
>> more complex you get the higher the risk of rejecting a valid email 

That suggestion will already reject some valid email addresses, e.g.
Abc\@def@example.com is syntactically valid regarding RFC 5322.

> I think it's also safe to check that there is at least one alphanumeric
> character before the @, at least one more between the @ and the last
> period, and at least two after the last period.
> Anything stricter than that will probably reject some valid addresses.

And even that would reject some syntactically valid email addresses,
such as " "@example.com.  Depending on the definition of alphanumeric,
it might even reject valid IDNs, and maybe valid local-parts according
to RFC 6531.

OTOH both algorithms might suffice in practise, if the user is given
other means of making contact.

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#23864

On Fri, 11 Apr 2014 18:37:16 +0300, Jukka Lahtinen wrote:

> Denis McMahon <denismfmcmahon@gmail.com> writes:
> 
>> The best easy check in javascript is probably that the email address
>> given contains no spaces, one and only one "@" symbol, and at least one
>> period on the right hand side of the "@". You can get more complex, the
>> more complex you get the higher the risk of rejecting a valid email
> 
> I think it's also safe to check that there is at least one alphanumeric
> character before the @, at least one more between the @ and the last
> period, and at least two after the last period.
> Anything stricter than that will probably reject some valid addresses.

For some value of "alphanumeric" in the context of domains being 
registered in non-latin alphabets.

Added to which, you still have the problem that you can only check it 
looks like what you think a valid email address looks like, you have no 
guarantee that the email address entered by any visitor to a web page is 
one that will reach them.

Unless you're going to perform some round trip verification of an email 
address (ie send a "create a user account" token) then you're wasting 
your time trying to "validate" email addresses in the browser client 
side, because all such "validation" will prove is "it looks right", and 
the more complex you make your "validation", the higher the risk of a 
false negative.

Forms requiring the user to enter their email address twice are just as 
bad. Entering the same data item twice in a form is just an inconvenience 
for the user, and does nothing to increase the validity of the entered 
data. An exception may be made for passwords which are not displayed back 
to the user, and where it is useful to check that the user entered what 
they thought they entered. However, if you also have an email address for 
the user, and have a provision for password recovery via email, then you 
can possibly skip with that inconvenience as well.

If I need the email address a user, then I use that email address they 
enter to send a token that they can use to gain access to whatever 
features I'm providing in return for their registering their email 
address.

If I don't need their email address, then I don't need to capture it at 
all, so I don't ask for it and I don't need to worry about verifying it.

So next time you're designing a form that asks for an email address, ask 
yourself:

a) Do I need to collect this email address?
b) Do I need to validate it as the user's real email address?

If the answer to b is no, then the answer to a is no. If the answer to b 
is yes, then you need to use the supplied email address to send an email 
to the user containing some token which they then use to gain access to 
your website features / validate their account. There is no other way to 
validate that the email address supplied is both genuine and a valid way 
to communicate with the person submitting it.

Note - I also expect my emailed token to be presented in the same browser 
session as the email address was submitted, otherwise you start again.

-- 
Denis McMahon, denismfmcmahon@gmail.com

[toc] | [prev] | [next] | [standalone]

#23842

anthony.glazebrook@gmail.com schrieb:
> I have an input form including an HTML5 <input type="email"> field.
>
> When the user arrives at the page, the 'submit' button is disabled.
 > When they have entered the information correctly, I'd like to enable
 > the 'submit' button.

Why that? The browser automatically prevents the form from submitting 
when the user tries but has entered an invalid email address. Even an 
appropriate, localised error message is shown.

> Is there any way to check the input field has correctly validated
 > without re-checking using a regular expression?

Yes. Just get the validity state of the input:

  !myInput.validity.valid
  // or explicitly checking for email format (in case of multiple
  // constraints):
  myInput.validity.typeMismatch

See 
http://dev.w3.org/html5/spec-preview/constraints.html#the-constraint-validation-api 
for details.

Regards,
  Bergi

[toc] | [prev] | [next] | [standalone]

#23846

Andreas Bergmaier <andber93@web.de> wrote on 11 apr 2014 in 
comp.lang.javascript:

> anthony.glazebrook@gmail.com schrieb:
>> I have an input form including an HTML5 <input type="email"> field.
>>
>> When the user arrives at the page, the 'submit' button is disabled.
> > When they have entered the information correctly, I'd like to enable
> > the 'submit' button.
> 
> Why that? The browser automatically prevents the form from submitting 
> when the user tries but has entered an invalid email address. Even an 
> appropriate, localised error message is shown.

Methinks not.

This perhaps happens when the browser is HTML5 aware,
but you should be somewhat backwards compatible, don't you?.


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

[toc] | [prev] | [next] | [standalone]

#23847

Andreas Bergmaier wrote:

> anthony.glazebrook@gmail.com schrieb:
>> I have an input form including an HTML5 <input type="email"> field.
>>
>> When the user arrives at the page, the 'submit' button is disabled.
>  > When they have entered the information correctly, I'd like to enable
>  > the 'submit' button.
> 
> Why that? The browser automatically prevents the form from submitting
> when the user tries but has entered an invalid email address. Even an
> appropriate, localised error message is shown.

The form is prevented from being submitted when the control has a value that 
does not comply with the specification of “valid e-mail address” in HTML5 
[1], which is a different thing than an invalid e-mail address.

I am not sure it is a bad idea to disable the submit button if the value is 
not considered appropriate; it certainly is better to do that if a custom 
message should be shown on input already, as it prevents user errors.

>> Is there any way to check the input field has correctly validated
>  > without re-checking using a regular expression?
> 
> Yes. Just get the validity state of the input:
> 
>   !myInput.validity.valid
>   // or explicitly checking for email format (in case of multiple
>   // constraints):
>   myInput.validity.typeMismatch
> 
> See
> http://dev.w3.org/html5/spec-preview/constraints.html#the-constraint-validation-api
> for details.

Insufficient, unfortunately.  “x@y” passes the built-in validation [1], but
e-mails to that "address" cannot reasonably be delivered.  The roundtrip 
should be avoided by rejecting such values on the client side already.

Also, one must consider the possibility that the “email” value for the 
“type” attribute is unsupported.

_________
[1] <http://www.w3.org/TR/2014/CR-html5-20140204/forms.html#valid-e-mail-address>
-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#23848

Thomas 'PointedEars' Lahn wrote:

> Andreas Bergmaier wrote: 
>> anthony.glazebrook@gmail.com schrieb:
>>> Is there any way to check the input field has correctly validated
>>  > without re-checking using a regular expression?
>> 
>> Yes. Just get the validity state of the input:
>> 
>>   !myInput.validity.valid
>>   // or explicitly checking for email format (in case of multiple
>>   // constraints):
>>   myInput.validity.typeMismatch
>> 
>> See
>> http://dev.w3.org/html5/spec-preview/constraints.html#the-constraint-validation-api
>> for details.
> 
> Insufficient, unfortunately.  “x@y” passes the built-in validation [1],
> but e-mails to that "address" cannot reasonably be delivered.  The
> roundtrip should be avoided by rejecting such values on the client side
> already.
> 
> Also, one must consider the possibility that the “email” value for the
> “type” attribute is unsupported.

You can use the “pattern” attribute to specify a syntax for e-mail addresses 
that is more strict [2], for example:

  <input name="email" type="email" pattern="^\s*\w@\w+\.\w+\s*$">

You can also use the mentioned Constraint Validation API with the “oninput” 
attribute (or another event-handler attribute) to validate the input while 
it is typed.  For example, it is possible to retrieve the built-in message 
that would be shown on validation, and to set a custom message.

I also note an “invalid” event that can be fired at the element without 
informing the user at first.

Presumably, this can be combined with traditional approaches for user agents 
that do not support this HTML5 feature.

> _________
> [1]
> [<http://www.w3.org/TR/2014/CR-html5-20140204/forms.html#valid-e-mail-address>

[2] <http://www.w3.org/TR/2014/CR-html5-20140204/forms.html#the-pattern-attribute>
-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web