jquery search for character @ in input value without plug in

Question

I have been searching for the solution for a while... I thought I had found it but in the end it doesn't work and I just can't manage anymore to see what I have done wrong...

What I want to achieve is that when in my contactform the inputfield for "#email" contains a wrong e-mailadress the border should highlight red. Right now with my code it only does this highlighting when the inputfield has been left empty. So I want to check if the value of the inputfield #email contains an @-character or not.

Here is my jQuery code for the input field #email:

$("form").on("submit",function(){

    valid = true;

if ($("#email").val() == '' || $("#email").val().indexOf(/[@]/) == false )  {
        $("#email").css("outline-color","#FF4E00")
        $("#email").css("outline-style", "solid");
        $("#email").css("outline-width", "2px");
        $("#email").attr("placeholder" , "Vul een correct e-mailadresin!");
        $("#email").css("color", "#FF4E00");
        valid = false;
    }
)};

Can anybody help me? I am new at this and it is a bit unclear right now... And sorry for my confusing english...

`indexOf("@") == -1` should be more than enough, but it's far from a robust way of ensuring the field has a valid email address. — Kevin B, Dec 12 '13 at 16:25
@KevinB ok thank you. I know it isn't the right way to validate an emailadress but I've only had 2 lessons of jQuery and we need to figure out a simple validation way on our own :).. but i am willing to learn other more robust ways — user3046998, Dec 12 '13 at 16:35
possible duplicate of [jQuery regex validation of e-mail address](http://stackoverflow.com/questions/2855865/jquery-regex-validation-of-e-mail-address) — Álvaro González, Dec 12 '13 at 17:40

score 1 · Accepted Answer · edited May 23 '17 at 10:25

You can use the method listed here: https://stackoverflow.com/a/2855946/682480

function isValidEmailAddress(emailAddress) 
{
    var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
    return pattern.test(emailAddress);
};

$("form").on("submit", function ()
{
    valid = true;

    var $email = $("#email"); 
    if (!isValidEmailAddress($email.val()))  
    {
        $email
            .css
            ({
                "outline-color": "#FF4E00",
                "outline-style": "solid",
                "outline-width": "2px",
                "color": "#FF4E00"
            })
            .attr("placeholder" , "Vul een correct e-mailadresin!");

       valid = false;
    }
)};

It's very quick ... check for yourself: http://so.devilmaycode.it/jquery-validate-e-mail-address-regex/ — Code Maverick, Dec 12 '13 at 16:30
Thank you! I had never heard of regex before and that is probably a shame so I'm going to check it. — user3046998, Dec 12 '13 at 16:48

score 0 · Answer 2 · answered Dec 12 '13 at 16:26

0

$("#email").val().match(/@/) == null

answered Dec 12 '13 at 16:26

Samuel

2,106
1
17
27

score 0 · Answer 3 · answered Dec 12 '13 at 16:26

0

$("#email").val().charPos('@') !== -1

answered Dec 12 '13 at 16:26

Seth McClaine

9,142
6
38
64

score 0 · Answer 4 · answered Dec 12 '13 at 16:28

0

String.indexOf() expects a plain string rather than a regular expression and returns integers rather than booleans. Right from my console:

"abc".indexOf(/[@]/) == false
false
"abc".indexOf("@") == -1
true

answered Dec 12 '13 at 16:28

Álvaro González

142,137
41
261
360

jquery search for character @ in input value without plug in

4 Answers4