Form validation if @ sign is typed change CSS

Question

At the moment I'm configuring a form with validation. Which all goes fine. But I'm trying to get the CSS to change when a user types in the @ sign. At this moment the CSS changes when a user types in more that 4 characters, using this code:

$(document).ready(function() {
    $('#Emailinput').keyup(function() {
        var count = this.value.replace(/ /g, '').length;
        var imageUrl = 'https://example.nl/wp-content/themes/example/img/check.png';
        var imageUrlcls = 'https://example.nl/wp-content/themes/example/img/close.png';
        $('#Emailinput').text(count);

        if (count >= 4) {
            $('#Emailinput').css({
                'border-color': '#c1c1c1',
                'background-image':'url( '+ imageUrl + ' )',
                'background-repeat':'no-repeat',
                'background-position': '98%'
            });            
        } else {
            $('#Emailinput').css({
                'border-color': 'red',
                'background-image':'url( '+ imageUrlcls + ' )',
                'background-repeat':'no-repeat',
                'background-position': '98%'
            });
        }
    });
});

Now I would like to change the count to an event when the @ sign is typed. Everywhere I looked i found this piece of code:

if ($('#email').val().indexOf('@') > -1) {

So I changed the code to:

$(document).ready(function() {
    $('#Emailinput').keyup(function() {
        var count = this.value.replace(/ /g, '').length;
        var imageUrl = 'https://example.nl/wp-content/themes/example/img/check.png';
        var imageUrlcls = 'https://example.nl/wp-content/themes/example/img/close.png';
        $('#Emailinput').text(count);

        if ($('#Emailinput').val().indexOf('@') > -1) {
            $('#Emailinput').css({
                'border-color': '#c1c1c1',
                'background-image':'url( '+ imageUrl + ' )',
                'background-repeat':'no-repeat',
                'background-position': '98%'
            });            
        } else {
            $('#Emailinput').css({
                'border-color': 'red',
                'background-image':'url( '+ imageUrlcls + ' )',
                'background-repeat':'no-repeat',
                'background-position': '98%'
            });
        }
    });
});

Any help, to get the CSS to change when the @ sign is typed? Did I place the code I found in the correct place? Any help would be appreciated.

Answer 1

I think your code is already working, see it here

JS

$(document).ready(function() {
    $('#Emailinput').keyup(function() {
        var count = this.value.replace(/ /g, '').length;
        var imageUrl = 'https://example.nl/wp-content/themes/example/img/check.png';
        var imageUrlcls = 'https://example.nl/wp-content/themes/example/img/close.png';
        $('#Emailinput').text(count);

        if ($('#Emailinput').val().indexOf('@') > -1) {
            $('#Emailinput').css({
                'border-color': 'green',
                'border-width': '5px',
                'background-image':'url( '+ imageUrl + ' )',
                'background-repeat':'no-repeat',
                'background-position': '98%'
            });            
        } else {
            $('#Emailinput').css({
                'border-color': 'red',
                'background-image':'url( '+ imageUrlcls + ' )',
                'background-repeat':'no-repeat',
                'background-position': '98%'
            });
        }
    });
});