Unobtrusive parsley

by bradleytrager

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/parsley.js/1.1.16/parsley.min.js"></script>
<form>
    <input id="myInput" type="text" />
</form>
<button id="btn_validate">validate</button>

CSS

.parsley-error{
    background:red
}

JavaScript

$(function () {
    $('form').parsley({
  // basic data-api overridable properties here..
  inputs: 'input, textarea, select'
  , excluded: 'input[type=hidden]'
  , trigger: false
  , focus: 'first'
  , validationMinlength: 3
  , successClass: 'parsley-success'
  , errorClass: 'parsley-error'
  , validators: {}
  , showErrors: true
  , messages: {
      required:""
  }

  //some quite advanced configuration here..
  , validateIfUnchanged: false
  , errors: {                     // specify where parsley error-success classes are set
    classHandler: function ( elem, isRadioOrCheckbox ) {}
  //, container: function ( elem, isRadioOrCheckbox ) {}
        , container: function ( elem, isRadioOrCheckbox ) {return null}
  , errorsWrapper: '<ul></ul>'
  , errorElem: '<li></li>'
  }
  , listeners: {
      onFieldValidate: function ( elem, ParsleyField ) { return false; }
    , onFormSubmit: function ( isFormValid, event, ParsleyForm ) {}
    , onFieldError: function ( elem, constraints, ParsleyField ) {}
    , onFieldSuccess: function ( elem, constraints, ParsleyField ) {}
  }
});
    $('input').parsley('addConstraint', {
        required: true
    });
    $('#btn_validate').click(function () {
        $('form').parsley('validate');
    });
});