### Parsley

Tweet

## Parsley Events Demo

<< Back to examples

#### Correctly fill at least one of these blocks

Firstname: Lastname:

Fullname:

    <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').parsley().subscribe('parsley:form:validate', function (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))
          return;

        // else stop form submission
        formInstance.submitEvent.preventDefault();

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

        $('.invalid-form-error-message').html('');
      });
    });
    </script>