Question

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>
    </div>
    <input  type="text" name="email" class="span4">

</div>

<script>

$('input[type=submit]').click(function() {
    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');
    }
    else
    {
        if (($('.' + parentname.attr('class') + ' #email').val().contains('@')) && ($('.' + parentname.attr('class') + ' #email').val().contains('.')))
        {
            email = 1;
        }
        else
        {
            alert('Please enter a valid email address');
        }
    }
});
</script>

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.");
}
else
{
    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!

Answer 1

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

$('.' + parentname.attr('class') + ' #email')