jQuery Group validation

Question

Currently in my application I need to enter student's parents details. Parents will be 3 types.

1. Mother
2. Father
3. Gardian

Validation scenarios describe below and all scenario are mandatory.

Scenario 1: Student has to fill atleast one parent detail

Scenario 2: If Student fill one of the field in Parent's details than other fields are mandatory.

Currently I can able to validate Scenario 2 but how to validate both the scenarios.

Here is my html code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<form class="form-inline" method="post">
<div class="form-group">
<input class="form-control" type="text" name="mother_fname" id="mother_fname" placeholder="Mother's First Name" />
</div>

<div class="form-group">
  <input class="form-control" type="text" name="mother_lname" id="mother_lname" placeholder="Mother's Last Name" />
</div>

<div class="form-group">
  <input class="form-control" type="text" name="mother_email" id="mother_email" placeholder="Mother's Email Address" />
</div>

<div class="form-group">
  <input class="form-control" type="text" name="mother_phone" id="mother_phone" placeholder="Mother's Phone Number" />
</div>


<hr>
<div class="form-group">
<input class="form-control" type="text" name="father_fname" id="father_fname" placeholder="Father's First Name" />
</div>

<div class="form-group">
  <input class="form-control" type="text" name="father_lname" id="father_lname" placeholder="Father's Last Name" />
</div>

<div class="form-group">
  <input class="form-control" type="text" name="father_email" id="father_email" placeholder="Father's Email Address" />
</div>

<div class="form-group">
  <input class="form-control" type="text" name="father_phone" id="father_phone" placeholder="Father's Phone Number" />
</div>

<hr>
<div class="form-group">
<input class="form-control" type="text" name="gardian_fname" id="gardian_fname" placeholder="Gardian's First Name" />
</div>

<div class="form-group">
  <input class="form-control" type="text" name="gardian_lname" id="gardian_lname" placeholder="Gardian's Last Name" />
</div>

<div class="form-group">
  <input class="form-control" type="text" name="gardian_email" id="gardian_email" placeholder="Gardian's Email Address" />
</div>

<div class="form-group">
  <input class="form-control" type="text" name="gardian_phone" id="gardian_phone" placeholder="Gardian's Phone Number" />
</div>

<hr>
<input type="submit" class="btn btn-primary" name="add_details" id="add_details" value="Add Details" />
</form>

Any help will be appreciated.

Answer 1

$(document).ready(function() {
        jQuery.validator.setDefaults({
            debug: true,
            success: "valid"
        });
        $("#myform").validate({
            rules: {
                mother_fname: {
                    require_from_group: [1, ".row1-group"]
                },
                mother_lname: {
                    require_from_group: [1, ".row1-group"]
                },
                mother_email: {
                    require_from_group: [1, ".row1-group"]
                },
                mother_phone: {
                    require_from_group: [1, ".row1-group"]
                },
                father_fname: {
                    require_from_group: [1, ".row2-group"]
                },
                father_lname: {
                    require_from_group: [1, ".row2-group"]
                },
                father_email: {
                    require_from_group: [1, ".row2-group"]
                },
                father_phone: {
                    require_from_group: [1, ".row2-group"]
                },
                gardian_fname: {
                    require_from_group: [1, ".row3-group"]
                },
                gardian_lname: {
                    require_from_group: [1, ".row3-group"]
                },
                gardian_email: {
                    require_from_group: [1, ".row3-group"]
                },
                gardian_phone: {
                    require_from_group: [1, ".row3-group"]
                }
            }
        });
    });

<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

<form id="myform" class="form-inline" method="post">
        <div class="form-group">
            <input class="form-control row1-group" type="text" name="mother_fname" id="mother_fname" placeholder="Mother's First Name" />
        </div>
        <div class="form-group">
            <input class="form-control row1-group" type="text" name="mother_lname" id="mother_lname" placeholder="Mother's Last Name" />
        </div>
        <div class="form-group">
            <input class="form-control row1-group" type="text" name="mother_email" id="mother_email" placeholder="Mother's Email Address" />
        </div>
        <div class="form-group">
            <input class="form-control row1-group" type="text" name="mother_phone" id="mother_phone" placeholder="Mother's Phone Number" />
        </div>
        <hr>
        <div class="form-group">
            <input class="form-control row2-group" type="text" name="father_fname" id="father_fname" placeholder="Father's First Name" />
        </div>
        <div class="form-group">
            <input class="form-control row2-group" type="text" name="father_lname" id="father_lname" placeholder="Father's Last Name" />
        </div>
        <div class="form-group">
            <input class="form-control row2-group" type="text" name="father_email" id="father_email" placeholder="Father's Email Address" />
        </div>
        <div class="form-group">
            <input class="form-control row2-group" type="text" name="father_phone" id="father_phone" placeholder="Father's Phone Number" />
        </div>
        <hr>
        <div class="form-group">
            <input class="form-control row3-group" type="text" name="gardian_fname" id="gardian_fname" placeholder="Gardian's First Name" />
        </div>
        <div class="form-group">
            <input class="form-control row3-group" type="text" name="gardian_lname" id="gardian_lname" placeholder="Gardian's Last Name" />
        </div>
        <div class="form-group">
            <input class="form-control row3-group" type="text" name="gardian_email" id="gardian_email" placeholder="Gardian's Email Address" />
        </div>
        <div class="form-group">
            <input class="form-control row3-group" type="text" name="gardian_phone" id="gardian_phone" placeholder="Gardian's Phone Number" />
        </div>
        <hr>
        <input type="submit" class="btn btn-primary" name="add_details" id="add_details" value="Add Details" />
    </form>

jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
});
$("#myform").validate({
    rules: {
        mother_fname: {
            require_from_group: [1, ".row1-group"]
        },
        mother_lname: {
            require_from_group: [1, ".row1-group"]
        },
        mother_email: {
            require_from_group: [1, ".row1-group"]
        },
        mother_phone: {
            require_from_group: [1, ".row1-group"]
        },
        father_fname: {
            require_from_group: [1, ".row2-group"]
        },
        father_lname: {
            require_from_group: [1, ".row2-group"]
        },
        father_email: {
            require_from_group: [1, ".row2-group"]
        },
        father_phone: {
            require_from_group: [1, ".row2-group"]
        },
        gardian_fname: {
            require_from_group: [1, ".row3-group"]
        },
        gardian_lname: {
            require_from_group: [1, ".row3-group"]
        },
        gardian_email: {
            require_from_group: [1, ".row3-group"]
        },
        gardian_phone: {
            require_from_group: [1, ".row3-group"]
        }
    }
});

<link href="https://jqueryvalidation.org/files/demo/site-demos.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
    <form id="myform" class="form-inline" method="post">
        <div class="form-group">
            <input class="form-control row1-group" type="text" name="mother_fname" id="mother_fname" placeholder="Mother's First Name" />
        </div>
        <div class="form-group">
            <input class="form-control row1-group" type="text" name="mother_lname" id="mother_lname" placeholder="Mother's Last Name" />
        </div>
        <div class="form-group">
            <input class="form-control row1-group" type="text" name="mother_email" id="mother_email" placeholder="Mother's Email Address" />
        </div>
        <div class="form-group">
            <input class="form-control row1-group" type="text" name="mother_phone" id="mother_phone" placeholder="Mother's Phone Number" />
        </div>
        <hr>
        <div class="form-group">
            <input class="form-control row2-group" type="text" name="father_fname" id="father_fname" placeholder="Father's First Name" />
        </div>
        <div class="form-group">
            <input class="form-control row2-group" type="text" name="father_lname" id="father_lname" placeholder="Father's Last Name" />
        </div>
        <div class="form-group">
            <input class="form-control row2-group" type="text" name="father_email" id="father_email" placeholder="Father's Email Address" />
        </div>
        <div class="form-group">
            <input class="form-control row2-group" type="text" name="father_phone" id="father_phone" placeholder="Father's Phone Number" />
        </div>
        <hr>
        <div class="form-group">
            <input class="form-control row3-group" type="text" name="gardian_fname" id="gardian_fname" placeholder="Gardian's First Name" />
        </div>
        <div class="form-group">
            <input class="form-control row3-group" type="text" name="gardian_lname" id="gardian_lname" placeholder="Gardian's Last Name" />
        </div>
        <div class="form-group">
            <input class="form-control row3-group" type="text" name="gardian_email" id="gardian_email" placeholder="Gardian's Email Address" />
        </div>
        <div class="form-group">
            <input class="form-control row3-group" type="text" name="gardian_phone" id="gardian_phone" placeholder="Gardian's Phone Number" />
        </div>
        <hr>
        <input type="submit" class="btn btn-primary" name="add_details" id="add_details" value="Add Details" />
    </form>

Please check below code

<form id="myform" class="form-inline" method="post">
    <div class="form-group">
        <input class="form-control row1-group" type="text" name="mother_fname" id="mother_fname" placeholder="Mother's First Name" />
    </div>
    <div class="form-group">
        <input class="form-control row1-group" type="text" name="mother_lname" id="mother_lname" placeholder="Mother's Last Name" />
    </div>
    <div class="form-group">
        <input class="form-control row1-group" type="text" name="mother_email" id="mother_email" placeholder="Mother's Email Address" />
    </div>
    <div class="form-group">
        <input class="form-control row1-group" type="text" name="mother_phone" id="mother_phone" placeholder="Mother's Phone Number" />
    </div>
    <hr>
    <div class="form-group">
        <input class="form-control row2-group" type="text" name="father_fname" id="father_fname" placeholder="Father's First Name" />
    </div>
    <div class="form-group">
        <input class="form-control row2-group" type="text" name="father_lname" id="father_lname" placeholder="Father's Last Name" />
    </div>
    <div class="form-group">
        <input class="form-control row2-group" type="text" name="father_email" id="father_email" placeholder="Father's Email Address" />
    </div>
    <div class="form-group">
        <input class="form-control row2-group" type="text" name="father_phone" id="father_phone" placeholder="Father's Phone Number" />
    </div>
    <hr>
    <div class="form-group">
        <input class="form-control row3-group" type="text" name="gardian_fname" id="gardian_fname" placeholder="Gardian's First Name" />
    </div>
    <div class="form-group">
        <input class="form-control row3-group" type="text" name="gardian_lname" id="gardian_lname" placeholder="Gardian's Last Name" />
    </div>
    <div class="form-group">
        <input class="form-control row3-group" type="text" name="gardian_email" id="gardian_email" placeholder="Gardian's Email Address" />
    </div>
    <div class="form-group">
        <input class="form-control row3-group" type="text" name="gardian_phone" id="gardian_phone" placeholder="Gardian's Phone Number" />
    </div>
    <hr>
    <input type="submit" class="btn btn-primary" name="add_details" id="add_details" value="Add Details" />
</form>

<script type="text/javascript">
$(document).ready(function() {
    jQuery.validator.setDefaults({
        debug: true,
        success: "valid"
    });
    $("#myform").validate({
        rules: {
            mother_fname: {
                require_from_group: [1, ".row1-group"]
            },
            mother_lname: {
                require_from_group: [1, ".row1-group"]
            },
            mother_email: {
                require_from_group: [1, ".row1-group"]
            },
            mother_phone: {
                require_from_group: [1, ".row1-group"]
            },
            father_fname: {
                require_from_group: [1, ".row2-group"]
            },
            father_lname: {
                require_from_group: [1, ".row2-group"]
            },
            father_email: {
                require_from_group: [1, ".row2-group"]
            },
            father_phone: {
                require_from_group: [1, ".row2-group"]
            },
            gardian_fname: {
                require_from_group: [1, ".row3-group"]
            },
            gardian_lname: {
                require_from_group: [1, ".row3-group"]
            },
            gardian_email: {
                require_from_group: [1, ".row3-group"]
            },
            gardian_phone: {
                require_from_group: [1, ".row3-group"]
            }
        }
    });
});
</script>

Answer 2

Finally I reached to the requirement and created code for it. I am not sure its a proper way or not.

Please check solution describe below. I used jQuery validation plugin and added one additional method as described below.

jQuery.validator.addMethod("checkParents", function(value, element) {
    var counter1 = 0;
    var counter2 = 0;
    var counter3 = 0;
    if ($('#gardian_fname').val() != '') {
        counter1++;
    }
    if ($('#gardian_lname').val() != '') {
        counter1++;
    }
    if ($('#gardian_phone').val() != '') {
        counter1++;
    }
    if ($('#gardian_email').val() != '') {
        counter1++;
    }

    if ($('#mother_fname').val() != '') {
        counter2++;
    }
    if ($('#mother_lname').val() != '') {
        counter2++;
    }
    if ($('#mother_phone').val() != '') {
        counter2++;
    }
    if ($('#mother_email').val() != '') {
        counter2++;
    }

    if ($('#father_fname').val() != '') {
        counter3++;
    }
    if ($('#father_lname').val() != '') {
        counter3++;
    }
    if ($('#father_phone').val() != '') {
        counter3++;
    }
    if ($('#father_email').val() != '') {
        counter3++;
    }
    if ((counter1 == 0 || counter1 == 4) && (counter2 == 0 || counter2 == 4) && (counter3 == 0 || counter3 == 4)) {
        if (counter1 == 0 && counter2 == 0 && counter3 == 0) {
            bootbox.alert('Please fill atleast one of parents details given below.<br><ul><li>1. Provide valid Name of your Parent.</li><li>2. Provide valid Email address of your Parent.</li><li>3. Provide valid Phone number of your Parent.</li></ul>');
            return false;
        } else {
            return true;
        }
    } else {
        if (counter1 > 0 && counter1 < 4) {
            errors = {gardian_fname: "Please fill all details of Gardian"};
            $validator.showErrors(errors);
        }
        if (counter2 > 0 && counter2 < 4) {
            errors = {mother_fname: "Please fill all details of Mother"};
            $validator.showErrors(errors);
        }
        if (counter3 > 0 && counter3 < 4) {
            errors = {father_fname: "Please fill all details of Father"};
            $validator.showErrors(errors);
        }
        return false;
    }
    return false;
}, 'Please select atleast one parents details and please enter name,email and phone number details');

Answer 3

Here's a basic logic flow of how it should look like, according to your demands:

document.forms[0].onsubmit = function(e){
    /* check both parent fields to see if one has any value */

    /* if one has value, ask user to fill all the parent's fields */
        /* check if all that parent's fields are filled also */
            /* if one isn't filled, stop the iteration and tell the user he must fill the rest */
            return false;

            /* if all are filled */
            return true;

     /* if no parent field has value */
        return false;
};