Advanced form styling (default email validation is right)

hello everyone

hope that everything going fine with all of you

this is my work for this assessment

i notice the builtin email validation does not behave as i thought it should be for example
according to my humble knowledge the email should be somthing@something.something but i notice that if i just write something@something it still say that it valid

i know i can use pattern or js and i should not relay on default validation cause there many way the user can trick the page but why it act like that for the simplest check

thanks for your time and your comment

have a nice day

Hi @justsomeone. I added a pattern match to your email input:

<input type="email" id="email" name="email" pattern=".+@globex.com">

The docs for this are here: <input type="email"> - HTML: HyperText Markup Language | MDN

Adding the pattern match also triggers an error if the email is invalid.

I found this paragraph which was also notable:

The input value is automatically validated to ensure that it’s either empty or a properly-formatted e-mail address (or list of addresses) before the form can be submitted. The :valid and :invalid CSS pseudo-classes are automatically applied as appropriate to visually denote whether the current value of the field is a valid e-mail address or not.

The pseudo classes are added by default and the pattern is your choice. Browsers that don’t support these selectors will fall back to a text input. Pro tip: this is where js comes in handy :slight_smile:

You’re doing a great job! Let me know if you need anything else :slight_smile:

thanks a lot @jrohatiner

that help but my question was about why the default validator just check for something@something not something@something.something

for example just@someone is considered valid email while it’s not as we all know that email require domain which include .com or .net or anything like that

i hope that make my question more clear

thanks again for your time and have a nice day :slight_smile:

Not sure I’m understanding what you mean. Here is the fiddle with the added validator:

https://jsfiddle.net/jrohatiner/w8fn5z6L/2/

For me, it works and accepts the submission if the email pattern matches. It directs to a page that doesn’t exist so it returns a 404. The submission, however, completes. I’m using a .com TLD but it will work if you change the pattern.

thanks again @jrohatiner

try to check the builtin validation
do not use any pattern and write any email without the .TLD it will show that it’s valid email

for example use just@gmail it will show that it valid email while it should not

i am talking about the default validator without any pattern

hope that make it clear

thanks and have a nice day

i hope that screen shoot clear my questionScreenshot from 2020-06-04 18-21-05
i mean that should not be valid email address cause it miss the TLD

@justsomeone it is possible to have a valid email address that doesn’t have a TLD, just not very common. The default email validation pattern allows for this.

Read https://serverfault.com/questions/721927/can-you-have-an-email-address-with-only-the-top-level-domain-as-the-domain-part for a bit mroe information.

1 Like

Hello @chrisdavidmills

thanks a lot man now i know why it was valid to allow that option

thanks again and have a nice day

1 Like