<form id="demo-form" data-parsley-validate>
  <div class="first">
    <label for="firstname">Firstname:</label>
    <input type="text" name="firstname" data-parsley-range="[4, 20]" data-parsley-group="block1" />

    <label for="lastname">Lastname:</label>
    <input type="text" name="lastname" data-parsley-range="[4, 20]" data-parsley-group="block1" />
  </div>
  <hr></hr>
  <div class="second">
    <label for="fullname">Fullname:</label>
    <input type="text" name="fullname" data-parsley-range="[8, 40]" data-parsley-group="block2" />
  </div>

  <div class="invalid-form-error-message"></div>
  <input type="submit" class="btn btn-default validate" />
</form>

<script type="text/javascript">
$(document).ready(function () {
  $('#demo-form').on('form:validate.parsley', function (evt, formInstance) {

    // if one of these blocks is not failing do not prevent submission
    // we use here group validation with option force (validate even non required fields)
    if (formInstance.isValid('block1', true) || formInstance.isValid('block2', true)) {
      $('.invalid-form-error-message').html('');
      return;
    }
    // else stop form submission
    formInstance.submitEvent.preventDefault();

    // and display a gentle message
    $('.invalid-form-error-message')
      .html("You must correctly fill the fields of at least one of these two blocks!")
      .addClass("filled");
    return;
  });
});
</script>