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.

I have completely no idea on how to catch the result of email format validation — mjnoach
– mjnoach, Commented Oct 3, 2017 at 21:36
Possible duplicate of How to validate email address in JavaScript? — mhodges
– mhodges, Commented Oct 3, 2017 at 21:37
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
– Patrick Evans, Commented Oct 3, 2017 at 22:03

Patrick Evans · Accepted Answer · 2017-10-03 22:32:04Z

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>

Collectives™ on Stack Overflow

How to detect HTML email input validation with JavaScript?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related