menu

Questions & Answers

Handling HTML5 types 'email', 'url' with JavaScript

Having

<input type="email" name="myEmail" />

I would like to inform JavaScript whether the entered input is en e-mail or not. Same thing with 'url' and other HTML5 input types.

Simply speaking - is there any 'flag' or whatsoever that signals if the HTML5 type requirement has been fulfilled?

Comments:
2023-01-17 00:47:01
2023-01-17 00:47:01
Html5 has basic validation for checking input type. If you want any specific validation you can use Regular Expression for that.
2023-01-17 00:47:01
required attribute will make sure that input field is not left empty when user is submitting the form.
Answers(3) :

Element.validity is a property that contains many useful things. The simplest of which is valid, which simply tells you if it's valid or not.

document.getElementById('test').oninput = function() {
  document.getElementById('result').textContent = this.validity.valid ? "Valid!" : "Invalid."
};
<input type="email" id="test" />
<div id="result"></div>

For more details, check the specification

Comments:
2023-01-17 00:47:01
I tried adee@coinachgaaaaaa and its saying Valid ! Not so good.
2023-01-17 00:47:01
As Adeel said, it's not working in 100%. I realise it's dependent on browser interpretation of an email type. Nevertheless, I appreciate your answer and will definitely use this in future. Thanks!
2023-01-17 00:47:01
But adee@coinachgaaaaaa is a valid email address. It might not exist, but it's valid.

You can check validity.valid for the state

document.getElementById("email").addEventListener("change", function() {
  
  console.log(this.validity.valid)  
  
});
<input type="email" id="email"/>

You could use the required parameter:

<input type="email" required>

So it will use the browser check for email, but actually it's not perfect. Something like asd@asd is valid even if you didn't wrote the TLD.

You also could use the pattern parameter parameter to use Regular Expressions.

 <input type="email" required pattern="[a-zA-Z0-9-_]*@[a-zA-Z0-9-_]*\.[a-z]{2,4}">

(Carefull this RegEx is mostly wrong/bad)

But actually you are aiming to the newer browsers and not every browser will have this functions.

The best way would be to use Javascript to do a validation with a Regular Expression like the one I allready wrote. You should search for an Expression that fits for your requirements, because there are a lot of Expressions in the internet.

Don't forget that everything that happens on the clientside can be exploitet. With Chrome you just need to hit F12 and change the Javascript Part for checking the validation. To be sure, you also should do a RegEx inside your serverside script.

The Javascript and Serverside check (like with PHP) should work in the most browsers, because the browser doesn't care about Serverside activities and Javascript existst since IE1 (?) or at least since at the early ages of browsers.

Comments:
2023-01-17 00:47:01
I'll be sure to avoid your site with my niet.absol@fake.email.addresses.website
2023-01-17 00:47:01
Even though I wrote (Carefull this RegEx is mostly wrong/bad) , I mostly wanted to get avoid by someone using an email with a sub-domain in it. But if we should count the wrong parts of the (already wrong/bad decleared) RegEx, we should also say that there are TLDs like .com.tr or something so [a-z]{2,4} isn't perfect too.
2023-01-17 00:47:01
True, you did, but even with a disclaimer suggesting regex for checking an email address is a really bad idea.
2023-01-17 00:47:01
Why? What would be a good way? Because they are probaly no perfect solution? "There may be bugs in it that [...]"
2023-01-17 00:47:01
Since both of you are right I'm having a huge dillema right now which answer I should check as the proper one
2023-01-17 00:47:01
The main issue is that even if an address is valid, that doesn't mean it exists. Far easier to just accept what the user types and run with it. If they don't get an email, it's not really your problem, but if you wanted to you could listen for bounced email messages and find out that they typed it wrong that way - that's the only reliable way.
2023-01-17 00:47:01
IMHO: Going with a Regular Expression that fits your personal requirements should be fine with considering that it's not 100% fail safe. At this point a basic knowdledge of RegEx would help a lot, maybe you can find a good explained one. I have to aprove that no method can ensure that the E-Mail is correct. You can only try to do a combination of something like "We send you an activation E-mail", "Please re-enter your e-mail" and "Your password is inside the Success Mail we send you". At last.. don't hang on this part to much. It eats to much time for low efficiency.