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 Joshua Farley
Joshua Farley
11,312 Points

Form Validation - Radio Buttons

I am trying to validate a section of my form using JS. The user should click one of 3 radio buttons. If none of them are selected, it should make a certain variable false. If the user clicks one of the radios, it should switch the value to true. From this, I can later check the variable to ascertain whether the submit button should be active.

Here are specific parts of my code:

                            <div class="form3col">
                                <p>
                                    <input type="radio" name="socPlan" value="Plan 1" id="plan1">
                                    <label for="plan1"><b>Plan 1</b></label>
                                </p>
                                <p>
                                    <input type="radio" name="socPlan" value="Plan 2" id="plan2">
                                    <label for="plan2"><b>Plan 2</b></label>
                                </p>
                                <p>
                                    <input type="radio" name="socPlan" value="Plan 3" id="plan3">
                                    <label for="plan2"><b>Plan 3</b></label>
                                </p>

                            </div>

<script>
$planSelectValid = false;

function ValidateRadioButtons() {  //Function for Validating If Radio Button isselected
                                    $('.form3col').find('radio').each(function () {  //LoopingthroughradioButtons
// "this" is the current element(radio) in the loop
if ($(this).is(':checked')) {
  $planSelectValid = true; //Radio Button is Checked
  }
});

if ($planSelectValid = true) {
    alert("Validation Passed");
  }
  else {
    alert("Please select a Radio Button");
  }
}
                                $('.form3col').find('radio').blur(ValidateRadioButtons);
</script>

1 Answer

Marcus Parsons
Marcus Parsons
15,719 Points
Marcus Parsons
Marcus Parsons
15,719 Points

Hey Joshua Farley,

It looks like your error stems from this comparison statement that isn't really a comparison statement:

if ($planSelectValid = true) {

What you need to do is change the single = to either a double or triple = sign i.e. == or ===. The single = sign is always an assignment operator and never a comparison operator. The == sign is the lenient form of comparison that can take certain truthy values and have them be equal to each other by converting them to the same type i.e. 1 == true, will be true because in a lot of forms of programming, 1 can be used in place of true just as 0 can be used in the place of false. Also, "1" == 1 will return true because it looks past what type of information it is to see the information inside. Now, the === is the strict comparison operator. So, if we evaluate 1 === true, we will get false, because 1 is not strictly true. Also, "1" === 1 returns false because a string is not strictly equal to a number.

What I'm getting at with all that is to use the comparison operator for the job at hand. Since you are comparing booleans, I would use the strict operator, because you only want to know when it is exactly true and not anything else that can be construed as true. So, I would put your comparison as:

if ($planSelectValid === true) {

Or even simply just:

//Automatically uses the strict operator to check if the statement returns true
//And saves time writing :)
if ($planSelectValid) {

Hope that helps, Josh!

Joshua Farley
Joshua Farley
11,312 Points

Thanks Marcus!

Marcus Parsons
Marcus Parsons
15,719 Points

No problem, Josh! Happy coding!