How to detect HTML email input validation with JavaScript?

Question

Similarly as to when you can detect wether an input element with a required attribute was correctly validated, writing the following code:

if($('input').attr('required')) {
   alert(1);
}

How can I check if an input of type='email' was a valid entry?

EDIT:

I am not asking about how can I validate the input by comparing it to regex.

When you set the input type attribute to 'email', the submitted string has to have a proper format (it needs to contain '@' symbol and have a proper ending) because otherwise you won't be able to submit the form. What I want to achieve is to prevent the default action of form submit and check what is the state of that email input validation similarly as to when you can check if the required input was provided.

maybe duplicate: https://stackoverflow.com/questions/46155/how-to-validate-email-address-in-javascript?rq=1 — Sysix, Oct 03 '17 at 21:36
I have completely no idea on how to catch the result of email format validation — manjii, Oct 03 '17 at 21:36
Possible duplicate of [How to validate email address in JavaScript?](https://stackoverflow.com/questions/46155/how-to-validate-email-address-in-javascript) — mhodges, Oct 03 '17 at 21:37
https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation — powerbuoy, Oct 03 '17 at 21:38
@Sysix, my question is different. I don't want to validate the email in my javascript by comparing the input to regex. I want to catch the result of the built-in form validation for email type input. — manjii, Oct 03 '17 at 21:39
@manjii the first answer has a good example with user inputs :) — Sysix, Oct 03 '17 at 21:39
Input's have a [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)(IE 10+, Safari 10.0.03+) that can be used to check validity, ie `if(!element.validity.valid)`, is this what you were meaning? — Patrick Evans, Oct 03 '17 at 21:49
@PatrickEvans Finally! That is more accurate although I tried it and it doesn't work. I get an error on the browser console saying "Cannot read property 'valid' of undefined". — manjii, Oct 03 '17 at 22:00
@PatrickEvans and this is the code I used: `if($('input[type=email]').validity.valid) { alert('tru'); }` — manjii, Oct 03 '17 at 22:02
validity is not a jQuery property, it is a DOM property. So you need to access it from the actual DOM object, ie `document.querySelector('.input-email').validity.valid` or `$('.input-email')[0].validity.valid`, or `$('.input-email').prop('validity').valid` — Patrick Evans, Oct 03 '17 at 22:03
@PatrickEvans Your last answer worked great! That was exactly what I was looking for. — manjii, Oct 03 '17 at 22:12

score 8 · Accepted Answer · answered Oct 03 '17 at 22:32

To check the native browser input validation, use the ValidityState object that is on the element object.

It provides a few properties to test certain aspects like typeMismatch that is a boolean describing if the value of the input is a valid syntax for a type (url,email).

var input = document.getElementById('yourInput');
if(input.validity.typeMismatch){
   console.log('Input is not valid type');
}

To check general validity you can just check against valid

var input = document.getElementById('yourInput');
if(!input.validity.valid){
   console.log('Input is not valid');
}

If using jQuery simply get access to the actual element object, or use jQuery's prop() method to get to the ValidityState object

var input = jQuery('input');
//input[0].validity.valid 
//input.get(0).validity.valid etc
if( input.prop('validity').valid ){
  console.log('Valid input');
}

Note also that a couple of pseudo css classes are also provided. :invalid and :valid if needing to provide validation styling

:invalid {
  border:1px solid red;
}

:valid {
  border:1px solid green;
}

Demo

var email = $('#email'),
    num   = $('#anumber');
 
email.on('input',()=>{
  if(email.prop('validity').typeMismatch){
    console.log('Invalid email syntax');
  }
});
num.on('input',()=>{
  if(num.prop('validity').stepMismatch){
    console.log('Invalid number step');
  }
});

:valid {
  border:1px solid green;
}
:invalid {
  border:1px solid rgb(255,0,0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="email" type="email" placeholder="Try Email">
<br>
<input id="anumber" step=10 type="number" placeholder="Try a number">
<br>
<input id="arequired" type="text" placeholder="Try a required" required>

How to detect HTML email input validation with JavaScript?

1 Answers1