parsley.js validator

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://parsleyjs.org/dist/parsley.min.js"></script>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
<h4>Correctly fill at least one of these blocks</h4>
<form class="demo-form" data-parsley-validate="">
  <div class="first">
    <label for="firstname">Firstname:</label>
    <input type="text" class="form-control" name="firstname" data-parsley-length="[4, 20]" data-parsley-group="block1">

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

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

JavaScript

$(function () {
  $('.demo-form').parsley().on('form:validate', function (formInstance) {
    var ok = formInstance.isValid({group: 'block1', force: true}) || formInstance.isValid({group: 'block2', force: true});
    $('.invalid-form-error-message')
      .html(ok ? '' : 'You must correctly fill *at least one of these two blocks!')
      .toggleClass('filled', !ok);
    if (!ok)
      formInstance.validationResult = false;
  });
});