Question

How do I get a condition validation for the following using javascript or jquery:

If I select “Yes”, I am a vegetarian..I must select a veggie
If I select “No”, I am NOT a vegetarian..I must select a Non veggie

<div>
<input name="Vegetarian" type="radio" value="1">Yes
<input name="Vegetarian" type="radio" value="0">No
</div>
..
<input name="Veggie" type="radio" value="veggieburger">Veggie Burger
<input name="Veggie" type="radio" value="fruit">Fruit
<input name="Veggie" type="radio" value="tofu">Tofu
<input name="Veggie" type="radio" value="salad">Salad
...
<input name="NonVeggie" type="radio" value="hamburger">Hamburger
<input name="NonVeggie" type="radio" value="chicken">Chicken
<input name="NonVeggie" type="radio" value="fish">Fish
<input name="NonVeggie" type="radio" value="turkey">Turkey

Answer 1

Try this:

$("#submit").click(function() {
    var isVegetarian = $("input[name='Vegetarian']:checked").val() == "1";

    if (isVegetarian && $("input[name='Veggie']:checked").length == 0) {
        alert("Please select a vegetarian option");
    }
    else if (!isVegetarian && $("input[name='NonVeggie']:checked").length == 0) {
        alert("Please select a non-vegetarian option");
    }
});

Example fiddle

If you have various forms throughout your site I’d recommend using jQuery validate. If this form is a one off, then this method is sufficient.