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...

Answer 1

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;
    }
)};

Answer 2

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

Answer 3

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

Answer 4

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