Need help checking if a value exist using JQuery .inArray()

Question

I would like to display an error message when a user types a value in an input field (emailaddressVal) that matches a value in my array (invalidEmailAddresses). But I don't know how to go about it. Thanks for your help!

$(document).ready(function(){
    $("input[name='emailAddress']").blur(function(){
        // Actual Email Validation function

            var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
            var hasError = false;
            var emailaddressVal = $("input[name='emailAddress']").val();
            var invalidEmailAddresses = 
            ['aol.com', 'yahoo.com', 'yahoo.fr', 'juno.com', 'hotmail.com', 'gmail.com'];     

            if($.inArray(invalidEmailAddresses,emailaddressVal) == -1) {
            alert('The email provided is not from a business related domain');                 

            }


    });


});

jQuery.inArray( value, array [, fromIndex ] ) api.jquery.com/jQuery.inArray — A. Wolff
– A. Wolff, Commented Apr 1, 2015 at 14:35
I understand, but how can I validate whatever value the user types. I don't want to hardcode the value — Spanky
– Spanky, Commented Apr 1, 2015 at 15:01

Sukanya1991 · Accepted Answer · 2015-04-01 16:57:02Z

2

Try the following code

    $(document).ready(function () {
    $("input[name='emailAddress']").blur(function () {

        var emailAddress = $("input[name='emailAddress']").val().trim();

        if (isValidEmailAddres(emailAddress)) {
            var hasError = false;
            var emailaddressVal = emailAddress.split('@').slice(1)[0].trim();

            var invalidEmailAddresses = ['aol.com', 'yahoo.com', 'yahoo.fr', 'juno.com', 'hotmail.com', 'gmail.com'];

            if ($.inArray(emailaddressVal, invalidEmailAddresses) >=0) {
                alert('The email provided is not from a business related domain');

            }
        } else alert("Invalid EmailID");
    });

    function isValidEmailAddres(emailID) {
        var regexExp = 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 regexExp.test(emailID);
    }

});

See this fiddle Changes That I did

I added a email Validation Function. Only if it is a valid email address you will proceed for hostname checking.

Correct Format of $.inArray is $.inArray( stringvalue, array). So it has to be $.inArray(emailaddressVal,invalidEmailAddresses)

emailaddressVal will contain a full email address. First you need to extract the hostname from that full email address. It is done at var emailaddressVal = emailAddress.split('@').slice(1)[0].trim(); So if your email address is [email protected], the above line will return gmail.com.

Return type of $inArray is the position at which the passed string (emailaddressVal in your case) is present in the arraylist (invalidEmailAddresses). It will return a value greater than or equal to 0. As per your requirement you have to show the message when you want the host in email id is present in array of host names. You need to do if($.inArray(emailaddressVal, invalidEmailAddresses) >=0)

edited Apr 1, 2015 at 16:57

answered Apr 1, 2015 at 14:59

Sukanya1991

7763 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

anon Over a year ago

Please explain what the difference is and why yours works, while the original doesn't. Also, I think that having debugger in the middle of your code will throw an error; I'm not certain about that, though

Sukanya1991 Over a year ago

First, in your code you did $.inArray(invalidEmailAddresses,emailaddressVal) which was incorrect. It should be $.inArray( stringvalue, array). Second, emailaddressVal is the host name like gmail.com. You passed the whole email address. You had to extract the hostname from the email address. I did it here var emailaddressVal = $("input[name='emailAddress']").val().split('@').slice(1)[0].trim();. Third, you wanted to show an error when email addresses are from invalidEmailAddresses. $inArray will return value greater than 0 when email addresses are from the domains in array

Spanky Over a year ago

You were. Thanks for the clarity Sukanya

anon Over a year ago

@Sukanya I meant in the answer, as that's part of it. Sorry for not clarifying. Could you edit it in?

Spanky Over a year ago

@Sukanya One thing. when I type in a name in my input field without using an @ symbol, I get the following console error. Uncaught TypeError: Cannot read property 'trim' of undefined

|

andre mcgruder · Accepted Answer · 2015-04-01 15:10:21Z

1

You can use the jQuery inArray test like this.

var emailaddressVal = $("input[name='emailAddress']").val();

The code beloe test the user input to see if it is in the array and stores the index in which it is located.

var inArrTest = $.inArray(emailaddressVal, invalidEmailAddresses);

This code test the inArrTest variable and gets the index of the users matched value.

if (inArrTest) {
    // Your error message would go here. //
    console.log(invalidEmailAddresses[inArrTest]);
}

You can nest your error message inside the if block.

answered Apr 1, 2015 at 15:10

andre mcgruder

1,5521 gold badge11 silver badges13 bronze badges

Comments

andre mcgruder · Accepted Answer · 2015-04-01 15:20:30Z

0

The original code does not work because the -1 checks to see if the variable is not in the array.

$.inArray(invalidEmailAddresses,emailaddressVal) == -1)

Sukanya's code check to see if the variable is greater than 0 which is the first index of an array.

 $.inArray(emailaddressVal,invalidEmailAddresses) > 0

answered Apr 1, 2015 at 15:20

andre mcgruder

1,5521 gold badge11 silver badges13 bronze badges

Collectives™ on Stack Overflow

Need help checking if a value exist using JQuery .inArray()

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related