Validate an email and display message inside a span tag

Question

I have this simple code here about the input type email. I have some reference about validating an email when user clicks the button. Here's the reference http://stackoverflow.com/questions/46155/validate-email-address-in-javascript

HTML code

<html>
<body>
    <div class="form-group">
        <input class="form-control" placeholder="Email" name="email" id="email" type="email" required>
        <span id="checkEmail"></span>
    </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<html>

I tried the script to validate and display a message in the span tag id="checkEmail" using keyup event function but it doesn't seem to work. Does my syntax is incorrect? Please help.

Its Script

<script>
//Email Regular Expression function
function validateEmail(email) {
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}

//Email Validate function
function validate() {
    $("#email").keyup(function() {

        var email = $("#email").val();
        if (validateEmail(email)) {
            $("#checkEmail").text(email + " is valid :)");
            $("#checkEmail").css("color", "green");
        } else {
            $("#checkEmail").text(email + " is not valid :(");
            $("#checkEmail").css("color", "red");
        }
    });

   //UPDATE
   $(document).ready(function() {
    $("#checkEmail").keyup(validate);
   });
   }
</script>

Check the link mate. – Gandalf the White Aug 25 '16 at 08:08 — Gandalf the White, Aug 25 '16 at 08:08
you have 2 different jquery libraries linked. Keep one. – Mads... Aug 25 '16 at 08:11 — Mads..., Aug 25 '16 at 08:11

Bart K · Accepted Answer · 2016-08-25T09:02:16.027

2

Your code works for me, all I needed to do is to call

validate();

anywhere on document load to actually bind the events.

(which means you might want to move the binding outside the validate function, to not re-bind it anytime you click/use the function)

edit: I have prepared a fiddle for you: https://jsfiddle.net/caz9o53e/

edited Aug 25 '16 at 09:02

answered Aug 25 '16 at 08:20

Bart K

324
1
8

Could you provide a JSFIDDLE on this sir? – laurence keith albano Aug 25 '16 at 08:24
in the JSFIDDLE sir, it actually works. But in testing it to my file. It will not work. How come? It does not work on javascript 1.7 – laurence keith albano Aug 25 '16 at 09:35
There must be a difference, either in your library set or in your code. Can you post / fiddle your version, which is not working? – Bart K Aug 25 '16 at 09:39
That's why it won't work sir, cause I post the code without the script tag – laurence keith albano Aug 25 '16 at 09:48

Gandalf the White · Answer 2 · 2016-08-25T08:20:59.200

1

I think you can use this fiddle link, does the work.

http://jsfiddle.net/o6d86xtw/1/

HTML

<label for="email" id="email">Hey!</label>
<input id="email" name="email" type="email" class="required" /> 
<span class="msg error">You shall not pass!</span>
<span class="msg success">You can pass!</span>

JQuery

var component = {
    input   : $('input[name="email"]'),
    mensage : {
        fields  : $('.msg'),
        success : $('.success'),
        error   : $('.error')
    }
},
   regex  = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/;

component.input.blur(function () {
    component.mensage.fields.hide();
    regex.test(component.input.val()) ? component.mensage.success.show() : component.mensage.error.show();
});

Note : I forked someone else's fiddle.

edited Aug 25 '16 at 08:20

answered Aug 25 '16 at 08:10

Gandalf the White

2,415
2
18
39

But e.g `java.the.hutt@gmail.com` is valid email – A. Wolff Aug 25 '16 at 08:14
@A.Wolff Regex is not his problem I guess. He can use whichever regex he wants. I am deleting this anyway, makes no sense. – Gandalf the White Aug 25 '16 at 08:16
You are correct, no really way to validate email from regex – A. Wolff Aug 25 '16 at 08:16
I meant that the answer makes no sense. – Gandalf the White Aug 25 '16 at 08:17
Well this could answer it but it isn't, imho – A. Wolff Aug 25 '16 at 08:18
Okay let me make amends then. – Gandalf the White Aug 25 '16 at 08:18

Validate an email and display message inside a span tag

2 Answers2