Simple email validation form. Totally confused

Question

This is not especially about how to build a email validation form. I found this piece of code: http://jsfiddle.net/jquery4u/5rPmV/

dyingOverHere();

You can see that it's working perfectly. I tried to implement the same thing in my website BUT for some reason in does not show the text. The one that should appear next to the input box saying in the email is valid or not. I started by only modifying some thing in my own form and ended pasting the exact code from Jsfiddle into my file and it's still not working. I'm using Mozzila FireFox. I also tried with Chrome and I get the same result. What am I missing?

did you include [jQuery library](http://jquery.com/download/) ? Check your console for errors if it showing `$ undefined` then you might not included library — Rakesh Shetty, Aug 13 '14 at 11:12
fiddle automatically wraps code in a dom ready handler, did you use one? — charlietfl, Aug 13 '14 at 11:15
try to create a **[jsbin](http://jsbin.com/)** maybe we will get a better insight on what you are trying to do, and where it fails — Matyas, Aug 13 '14 at 11:17

score 1 · Accepted Answer · answered Aug 13 '14 at 11:19

Since you have not posted your code what you have modified, I assume the following things :

You might not included the jQuery library
You have not wrap your code inside DOM ready function

Solution :

You have to inluded the jquery library like this :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Then you have to wrap all jQuery code inside ready function like this :

<script type="text/javascript">

    $(document).ready(function(){

         $('form input[name="email"]').blur(function () {
             var email = $(this).val();
             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,}))$/igm;
             if (re.test(email)) {
                $('.msg').hide();
                $('.success').show();
             } else {
                $('.msg').hide();
                $('.error').show();
             }

         });



    });
</script>

score 0 · Answer 2 · answered Aug 13 '14 at 11:16

Check that you included the jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Open the developer tools in Chrome, Use Ctrl+Shift+I (or Cmd+Opt+I on Mac) to open. From there check the console tab if you get any errors.

score 0 · Answer 3 · edited May 23 '17 at 12:11

0

you can use HTML5 attribute:

<input type="email" pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" required placeholder="Enter you Email">

HTML5 Email Validation

edited May 23 '17 at 12:11

Community

1
1

answered Aug 13 '14 at 11:22

tonoslfx

3,422
15
65
107

Simple email validation form. Totally confused

3 Answers3