Skip to content

Latest commit

 

History

History
61 lines (48 loc) · 2.42 KB

README.md

File metadata and controls

61 lines (48 loc) · 2.42 KB

valstrap

Angular validation directives for Bootstrap forms.

Install

bower install valstrap

Directives included

All directives must be declared as attributes

  • val-form - must be declared on the <form> element
  • val-group - declare it on the form-group wrapper element. Will add or remove the has-error class as appropriate
  • val-model - must be declared on each individual input element (and each input must use ng-model)
  • val-error - can be assigned an optional error name to filter on (see examples below). Otherwise will default to showing on required

Behaviour

  • Only adds the has-error class to highlight form group error after user has focused into an input element
  • Shows error messages when form submitted
  • Error messages remain visible until fully resolved (rather than disappearing as soon as you focus back into element)

Example Usage

    <form class="form-horizontal" role="form" name="form" novalidate val-form ng-submit="save()">
        <fieldset>
            <div class="form-group" val-group>
                <label for="inputTitle" class="col-lg-2 control-label">Title</label>
                <div class="col-lg-8">
                    <input type="text" name="title" ng-model="model.title" required ng-minlength="3" ng-maxlength="50" val-model
                           class="form-control" id="inputTitle" placeholder="Title" autocomplete="off">
    
                    <p val-error="required" class="help-block">Title is required.</p>
                    <p val-error="minlength" class="help-block">Please enter at least 3 characters.</p>
                    <p val-error="maxlength" class="help-block">Title is too long.</p>
                </div>
            </div>
            <div class="form-group" val-group>
                <label for="inputDescription" class="col-lg-2 control-label">Description</label>
                <div class="col-lg-8">
                    <textarea class="form-control" ng-model="model.description" required rows="3" id="inputDescription" val-model></textarea>
                    <p val-error class="help-block">Description is required.</p>
                </div>
            </div>
            <div class="form-group">
                <div class="col-lg-10 col-lg-offset-2 buttons">
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </div>
        </fieldset>
    </form>

License

MIT