jQuery Validation Dynamic Rules

Change the rules of the jQuery Validation for dynamic content, then revert it back to the original form-wide rules.

HTML

<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.0/dist/jquery.validate.js"></script>
<form>
  <label for="firstName">First Name</label>
  <input id="firstName" type="text" name="FirstName" />

  <label for="lastName">Last Name</label>
  <input id="lastName" type="text" name="LastName" />

  <label for="age">Age</label>
  <input id="age" type="text" name="Age" />

  <div class="dependents-header">
    <span>Dependents</span>
    <button id="addDependent" type="button">Add Dependent</button>
  </div>

  <div id="dependents">
  </div>

  <button id="submit" type="button">
  Submit
  </button>
</form>

CSS

body {
  background: ##ccc;
  padding: 20px;
  font-family: Helvetica;
}

#submit {
  margin-top: 30px;
  float: right;
}

#dependents {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
}

.dependent-record span {
  margin-right: 15px;
}

.dependents-header {
  margin-top: 30px;
  border-bottom: 1px solid gray;
  display: inline-block;
  width: 100%;
  padding-bottom: 10px;
}

.dependents-header span {
  float: left;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.7);
}

.dependents-header button {
  float: right;
}

.inline-edit-row input {
  margin-right: 10px;
}

.has-error {
  border: 1px solid red;
}

.help-block.error {
  color: red;
}

JavaScript

var formValidationSettings = {
  ignore: '[readonly], :hidden',
  highlight: function(element) {
    $(element).addClass('has-error');
  },
  unhighlight: function(element) {
    $(element).removeClass('has-error');
  },
  errorElement: 'span',
  errorClass: 'help-block error',
  errorPlacement: function(error, element) {
    // do nothing, which suppresses the validation message
  },
  rules: {
    FirstName: {
      required: true
    },
    LastName: {
      required: true
    },
    Age: {
      required: true
    }
  }
};

var dependentValidationSettings = {
  rules: {
    DependentName: {
      required: true
    },
    Relationship: {
      required: true
    }
  }
};

var $form = $('form');

var addDependent = function(name, relationship) {
  var html =
    '<div class="dependent-record">' +
    '<label>Name: </label>' +
    '<span>' + name + '</span>' +
    '<label>Relationship: </label>' +
    '<span>' + relationship + '</span>' +
    '</div>';

  $('#dependents').append(html);
};

var buildDependentInputs = function() {
  var inputHtml =
    '<div class="inline-edit-row">' +
    '<label>Dependent Name: </label>' +
    '<input type="text" name="DependentName" class="dependent-name" />' +
    '<label>Relationship: </label>' +
    '<input type="text" name="Relationship" class="relationship" />' +
    '<button type="button" class="save-dependent">Save Dependent</button>' +
    '</div>';

  $('#dependents').append(inputHtml);
};

var saveDependent = function() {
  // create a deep copy (not reference) of the original form jQuery Validator settings
  var originalSettings = $.extend(true, {}, $form.validate().settings);

  // overwrite the original form settings with those for the dependent record
  var settings = $form.validate().settings;
  $.extend(settings, dependentValidationSettings);

  if ($form.valid()) {
    var dependentName = $('.inline-edit-row input.dependent-name').val();
    var relationship = $('.inline-edit-row input.relationship').val();

 ...