Question

I have done some research on the above and found that I am able to use errorPlacement and some commands in order to achieve a portion of my work.

However; what I have is the following:

Option 1 – Two fields
Option 2 – Two fields

Depending if a user has the need for option 1 or 2, they need to enter both fields for EACH option they have chosen.

For example

<form>
<fieldset>
<div id="option1">
<input type="text" id="number" name="field1">
<input type="text" id="firstname" name="field2">
</div>
<div id="option2">
<input type="text" id="cardnumber" name="field3">
<input type="text" id="firstname" name="field4">
</div>
</fieldset>
</form>

So basically, if the user decides option 1 is best for them, both number and firstname need to be validated. If they choose option2, both cardnumber and firstname need to be validated.

Answer 1

function validate() {
    var number = $("#number").val();
    var numberFirstName = $("#firstname").val();
    var cardNumber = $("#cardnumber").val();
    var cardNumberFirstName = $("#c_firstname").val();

    if (number != "" && numberFirstName == "") {
        alert("Complete both fields on Option 1");
    }

    if (cardNumber != "" && cardNumberFirstName == "") {
        alert("Complete both fields on Option 2");
    }
} 

Note that you can’t have the same id property for 2 different elements. So I changed “Option 2 firstname id” to “c_firstname”.