How to validate email without button click

Question

I have the below code where i am validating email on button click. I want that email validation should happen without button click. Means i want when i will be writing the email in the text box, it should get validated.

Below is my code -

<!DOCTYPE html>
<html>
<body>

<form >
  E-mail: <input type="email" id="myEmail" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
  <input type="submit">
</form>
</body>
</html>

Regards

Always have server-side validation too. Never rely on client side only. — evolutionxbox, Jul 13 '16 at 13:46
Validating a Email adress with regex is a nightmare. Be careful how you use it. [See here](http://stackoverflow.com/questions/201323/using-a-regular-expression-to-validate-an-email-address) — Fairy, Jul 13 '16 at 13:54

score 0 · Answer 1 · answered Jul 13 '16 at 13:45

You should run the validation code whenever the input field's value changes (validation code: match the current content with the regular expression). With jquery it looks like this:

$("#email").on("keyup change paste cut", function() { 
   // validate here 
});

Arif · Answer 2 · 2016-07-13T13:54:45.573

0

You should attach an event to that input element and validate it with javasciprt.

Check this working Fiddle

var patt = new RegExp("[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$");

$('body').on('keyup change paste cut', '#myEmail', function() {

    var res = patt.test($(this).val()) === true  ? 'Correct Email' : 'You have entered some crap';
  $('.result').text(res)
});

edited Jul 13 '16 at 13:54

answered Jul 13 '16 at 13:50

Arif

1,617
9
18

Hey Arif.. when i key in hh@--------------------.com email address, its showing as correct email which shouldnt be. Can u please check. – user2542953 Jul 13 '16 at 13:52
I've updated the Fiddle. Check again. It was working fine, but you should create regex yourself as you want – Arif Jul 13 '16 at 13:55

Yosvel Quintero · Answer 3 · 2016-07-13T15:36:24.253

Using JavaScript and jQuery library you can attach and handle multiple events in the form fields.

Also you should add the novalidate boolean attribute in your form to prevent form-data (input) validation on submit:

$('#form').on('keyup change paste cut click', '#mySubmit, #myEmail', function(e) {
    var pattern = /^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i,
        emailVal = $('#myEmail').val(),
        emailErrorMsg = (!emailVal || !pattern.test(emailVal)) 
        ? 'Error validation message'
        : '';

    $('.email-error').text(emailErrorMsg);

    if (emailErrorMsg) {
        e.preventDefault();
    }
});

.error {color: red;}
.submit {margin-top: 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form" novalidate>
    Email: <input type="email" id="myEmail" name="email">
    <div class="email-error error"></div>
    <input type="submit" id="mySubmit" class="submit">
</form>

score 0 · Answer 4 · answered Jul 13 '16 at 14:15

Native JS Solution

You can use this.checkValidity() in combination with onblur:

<form >
  E-mail: <input type="email" id="myEmail" onblur="this.style.borderColor= this.checkValidity() ? 'green' : 'red'" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
  <input type="submit">
</form>

<form >
      E-mail: <input type="email" id="myEmail" onblur="this.style.borderColor= this.checkValidity() ? 'green' : 'red'" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
      <input type="submit">
</form>

Or in combination with onkeyup it will show the message (a little bit annoying):

<form >
  E-mail: <input type="email" id="myEmail" onkeyup="this.checkValidity() || this.form.submit.click()" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
  <input name="submit" type="submit">
</form>

<form >
  E-mail: <input type="email" id="myEmail" onkeyup="this.checkValidity() || this.form.submit.click()" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
  <input name="submit" type="submit">
</form>

score 0 · Answer 5 · answered Jul 13 '16 at 14:17

As a variation if you want to minimize the firing of the validation function, you can give the input type="submit" an id and attach a mouseenter listener (plus a function to prevent the function click if invalid email):

$("#input-submit").mouseenter(function () {
    //validation function - but also prevents the button click if email invalid
});

I have used this before - our QA tester tried everything he could to click the button before the validation function fired but could not.

score 0 · Answer 6 · answered Apr 11 '21 at 06:24

Without jQuery library email validation. Just using very simple codes. Conditionally validation.

HTML codes

<body>
    <form action="/hello" onchange="ValidateEmail()">
        <input type="text" placeholder="Your email address..." id='input_id' required>
        <button id="myBtn" type="submit">Notify Me</button>
    </form>
    <p id="validation"></p>
    <script src="main.js"></script>
 </body>

JS codes

function ValidateEmail() {
    var x = document.getElementById('input_id').value
    var atpos = x.indexOf("@");
    var dotpos = x.lastIndexOf(".");
    if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length || x==='') {
        document.getElementById("validation").innerHTML = "Please provide a valid email address";
        document.getElementById("myBtn").disabled = true;      
    }
    else{
        document.getElementById("validation").innerHTML = "";
        document.getElementById("myBtn").disabled = false;  
    }
}

How to validate email without button click

6 Answers6

Native JS Solution