Question

Alright so I’ve been making an attempt at this for a while now. My logic seems correct in my eyes but there must be something that I am missing. Here is my code:

the html:

<div class="login-input-wrap">
    <h3>First Name:</h3>
    <input type="text" name="firstname" />
</div>

the javascript with some jquery

function validateSignUp()
{
    var fname = $('input [name|="firstname"]');
    if (fname.val() == "" || fname.val() == null)
    {
        fname.parent().children('h3').css("color", "red");
        alert ("here it is");
    }
    return false;
}

validate gets called when the form is submitted, the alert is being called but the css isn’t working. I also tried selecting the sibling of the input like this:

function validateSignUp()
{
    var fname = $('input [name|="firstname"]');
    if (fname.val() == "" || fname.val() == null)
    {
        fname.siblings('h3').css("color", "red");
        alert ("here it is");
    }
    return false;
}

but that didn’t work either.

thanks for any help.

Answer 1

Remove the space after input in this selector. There must be no spaces between things that all apply to the same object. You were not correctly selecting the input tag so an empty jQuery object had no siblings so the rest didn’t work. Change this:

$('input [name|="firstname"]')

so it looks like this:

$('input[name|="firstname"]')

You can see it work here: http://jsfiddle.net/jfriend00/YyUAx/

---

You can also simplify this:

if (fname.val() == "" || fname.val() == null)

by changing it to this:

if (!fname.val()) {