Sandbox: JavaScript

OnFormValidate Behavior.OnFormValidate.js

Allows you to invoke an element method when a form validates or fails to validate.

Basic Usage

Validates that a form's inputs are correct. Fill out the form as described and submit it. Errors should be displayed as you enter invalid values.

I turn red when the form is not valid, green when it is.

<form id="foo" data-behavior="FormValidator" class="form-horizontal">
  <div class="form-group">
    <label class="col-lg-5 control-label">this cannot be empty</label>
    <div class="col-lg-5"><input name="a" data-validators="required" class="form-control"></div>
  </div>
  <div class="form-group">
    <div class="col-lg-offset-5 col-lg-5">
      <button type="submit" data-behavior="OnFormValidate" data-onformvalidate-options="
        'onSuccess': [
          {
            'method': 'addClass',
            'args': ['emerland-bkg']
          },
          {
            'method': 'removeClass',
            'args': ['pomegranate-bkg']
          }
        ],
        'onError': [
          {
            'method': 'removeClass',
            'args': ['emerland-bkg']
          },
          {
            'method': 'addClass',
            'args': ['pomegranate-bkg']
          }
        ]
      " class="btn btn-default">Submit</button>
    </div>
  </div>
  <p class="text-center" data-behavior="OnFormValidate" data-onformvalidate-options="
    'onSuccess': [
      {
        'method': 'addClass',
        'args': ['emerland']
      },
      {
        'method': 'removeClass',
        'args': ['pomegranate']
      }
    ],
    'onError': [
      {
        'method': 'removeClass',
        'args': ['emerland']
      },
      {
        'method': 'addClass',
        'args': ['pomegranate']
      }
    ]
  ">I turn red when the form is not valid, green when it is.</p>
</form>