Take the 2-minute tour ×

NOTE Please see this question for a bit of background...

So my (very basic) form validation is working - sort of.

When checking the input value for the email address field, I want to make sure that the email address has a value (i.e. is not blank) and contains @ and . characters so I did this...

<div width="100%" class="con1">

    <div class="lable">
        <label for="email">Email Address *</label>
    <input  type="text" name="email" class="span4">



    var parentname = $(this).parent('div');
    console.log('Form used: ' + parentname);

    var email = 0,

    // Validate email
    if ($('.' + parentname.attr('class') + ' #email').val() == '')
        alert('Please enter a valid email address');
        if (($('.' + parentname.attr('class') + ' #email').val().contains('@')) && ($('.' + parentname.attr('class') + ' #email').val().contains('.')))
            email = 1;
            alert('Please enter a valid email address');

It looks a little weird but complexity as mentioned in the linked question above required me to think a little differently with my selectors.

Basically $('.' + parentname.attr('class') + ' #email') is the same as writing (in the case I'm using $('.con1 #email') as the selector which I believe to be correct based on my HTML structure.

I tried working with $('.' + parentname.attr('class').child('#email') but then kept getting an error that said the element had no method 'child'

I wrote this based on a previous form I'd created where I'd used the same principle in effect, to block emails coming from yahoo.com because I was getting a lot of spam from there:

if ($("#contact-email").val().contains("yahoo.com")) {
     $(".errmsg").text("Domain yahoo.com has been banned due to excessive spam, please use another domain.");
    email = 1;

While the 2nd sample that I've pasted here works, the first one that validates the email field more thoroughly keeps returning this error:

Uncaught TypeError: Cannot call method 'contains' of undefined

I can't understand how this could work in one site and not another. I feel like I'm missing something so would appreciate it if anyone can see what that might be.

Thanks in advance!

share|improve this question
Hi, if you comment out the else block and enter an empty email address, does your alert statement get called? if ($('.' + parentname.attr('class') + ' #email').val() == '') –  WheretheresaWill Feb 21 '13 at 9:11
store $('.' + parentname.attr('class') + ' #email').val() in a variable and debug it.. –  Mr_Green Feb 21 '13 at 9:12
That's another confusing thing. All field (first name, contact number, email, comments) are validated in the same way and I haven't actually entered data into any of the fields in any of my tests so far, so the alert should be hit regardless, not this check - yet –  Ortund Feb 21 '13 at 9:14
Shouldn't the <input> have an id of "email" to allow this selector? $('.' + parentname.attr('class') + ' #email') –  WheretheresaWill Feb 21 '13 at 9:14
@WheretheresaWill you are absolutely right. Added in id attributes on all my inputs and it works as expected now. Please write an answer for your karma :) –  Ortund Feb 21 '13 at 9:18
show 1 more comment

1 Answer

up vote 1 down vote accepted

The elements should have an id="email" to allow the selector:

share|improve this answer
Don't suppose you can suggest why I'm getting an error that says Object me@this.com has no method 'contains' when I enter an email address as well? –  Ortund Feb 21 '13 at 9:28
Ah yes - sorry I didn't spot this. Contains() is for use with jquery objects and not strings. For strings you'd have to use .indexOf("@") which returns the location of the character within the string, or -1 if it isn't present. Try something like: if( ($('.' + parentname.attr('class') + ' #email').val().indexOf('@') > 0) –  WheretheresaWill Feb 22 '13 at 10:28
add comment

Your Answer


