Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by James Moran
James Moran
7,271 Points

Can not find class within a fieldset?

I'm looping through each fieldset on my page to find out if any of its children contain the class '.is-invalid'.

If it is invalid I will disable the appropriate "a" tag (this bit works)

Here is a snippet of my HTML:

        <div id="create-advert-menu">
            <ul>
                <li>
                    <a href="#">Getting Started</a>
                </li>
                <li>
                    <a href="#">Job Description</a>
                </li>
                <li>
                    <a href="#">Application Form</a>
                </li>
                <li>
                    <a href="#">Final Details</a>
                </li>
                <li>
                    <a href="#">Finish &amp; Share</a>
                </li>
            </ul>

            <fieldset>
                <h1 class="title">Application Form</h1>
                <div class="create-advert-radios">
                    <p>Candidate details</p>
                    <hr>

                    <p>Name</p>
                    <div class="radios-collection">
                        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="name-required">
                            <input class="mdl-radio__button" id="name-required" name="candidate-name" type="radio" value="off">
                            <span class="mdl-radio__label">Required</span>
                        </label>
                        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="name-optional">
                            <input checked class="mdl-radio__button" id="name-optional" name="candidate-name" type="radio" value="off">
                            <span class="mdl-radio__label">Optional</span>
                        </label>
                        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="name-off">
                            <input class="mdl-radio__button" id="name-off" name="candidate-name" type="radio" value="off">
                            <span class="mdl-radio__label">Off</span>
                        </label>
                    </div>
                    <hr>

                    <p>Email</p>
                    <div class="radios-collection">
                        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="email-required">
                            <input class="mdl-radio__button" id="email-required" name="candidate-email" type="radio" value="off">
                            <span class="mdl-radio__label">Required</span>
                        </label>
                        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="email-optional">
                            <input checked class="mdl-radio__button" id="email-optional" name="candidate-email" type="radio" value="on">
                            <span class="mdl-radio__label">Optional</span>
                        </label>
                        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="email-off">
                            <input class="mdl-radio__button" id="email-off" name="candidate-email" type="radio" value="off">
                            <span class="mdl-radio__label">Off</span>
                        </label>
                    </div>
                    <hr>

This is the javascript:

$('#create-advert-form fieldset').each(function (index) {
    index += 1;
    console.log(this);

    if ($(this).hasClass('is-invalid')) {
        console.log('Invalid');
        $('#create-advert-menu a:nth-of-type(' + index + ')').bind('click', false);
    } else {
        console.log('Valid');
    }
});

Also here is a snapshot of the console: http://imgur.com/pGHxW17

Thank you to anyone that helps!

1 Answer

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

It doesn't look like you are checking the class of the children of the fieldset. Your loop seems to be checking the class of each fieldset itself. You'll need to change your first JQuery selector if you want to target the child elements.

Also, there don't seem to be any elements that have the the class is-invalid in the HTML.

James Moran
James Moran
7,271 Points

Thanks you for your reply.

I have replaced: if ($(this).hasClass('is-invalid')) with: if ($('#create-advert-form fieldset *').hasClass('is-invalid')) and also tried: if ($('#create-advert-form fieldset').children().hasClass('is-invalid'))

But it still doesn't work.

Also, the children definitely gain that class if not valid.