How to validate email input in jQuery?

Question

I am not using the form tag.

<input type="email" placeholder="Email" name="email" />
<input type="password" placeholder="Password" name="password" />
<p>Submit</p>

This is the jQuery:

$(document).on("click","p",function(){
    var email = $(".inputs input[name=email]").val();
    var password = $(".inputs input[name=password]").val();
    $.ajax({
        url:"url",
        method:"POST",
        data:{email:email,password:password},
        success:function(data){
            alert("Done");
        }
    });
});

Normally Chrome forces your email input to be valid, before it allow you to submit.

How can I do this with just jQuery Ajax, where no form tag or button is present?

Does this answer your question? [How to validate an email address in JavaScript](https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript) — Roger K, Apr 30 '21 at 12:45

score 1 · Answer 1 · answered Apr 30 '21 at 12:42

If you don't want to use form, then the other way i suggest would be to use a Regular Expression to test the email value you received. Use javascript's RegExp.

    $(document).on("click","p",function(){
            var email = $(".inputs input[name=email]").val();
            var password = $(".inputs input[name=password]").val();
            var isProperEmail = new RegExp(/(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/).test(email);
            if(isProperEmail) {
                 //ajax Call
            } 
            else {
                 //error handler
            }
     })

Got the Regex from answer of this stackoverflow question.

score 0 · Accepted Answer · answered Apr 30 '21 at 12:42

0

You can just use vanilla Javascript's checkValidity():

$("input[type='email']")[0].checkValidity();

answered Apr 30 '21 at 12:42

Rojo

2,749
1
13
34

score 0 · Answer 3 · answered Apr 30 '21 at 12:53

You do not need jQuery for email validation. As long as you use the <input type="email"> attribute, the form submission will fail if the syntax is malformed.

const formData = (form) => [...form.elements]
  .filter(el => el.getAttribute('name'))
  .reduce((acc, el) => ({ ...acc, [el.getAttribute('name')]: el.value }), {});

const handleSubmission = (e) => {
  const params = formData(e.target);
  fetch('/login', { method: 'POST', body: JSON.stringify(params) })
    .then(response => alert('Successful login'))
    .catch((error) => console.error(`Failed to login user: ${params.email}`));
  e.preventDefault(); // Remove when you want the page to navigate.
};

document.forms['login'].addEventListener('submit', handleSubmission);

<form name="login">
  <input type="email" placeholder="Email" name="email" />
  <input type="password" placeholder="Password" name="password" />
  <button>Submit</button>
</form>

You added in `form`, maybe you answered the wrong question? Someone else has already answered and I've accepted that — preokg, Apr 30 '21 at 13:03
@preokg No, I was answering yours. If you want to handle appropriate form submission, it is advised that you use an actual form. Please review: [**MDN: _Client-side form validation_**](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation) — Mr. Polywhirl, Apr 30 '21 at 13:38

How to validate email input in jQuery?

3 Answers3