angular-auto-validate | An automatic validation module for AngularJS using directives

angular-auto-validate

angular-auto-validate

Stars : 10

Forks : 10

Created by Jon Samwell

bower install angular-auto-validate

Demo Download GitHub

An automatic validation module for AngularJS which gets rid of excess html in favour of dynamic element modification to notify the user of validation errors

How to use

bower install angular-auto-validate --save

Load the required javascript libraries

<script src="bower_components/angular-auto-validate/dist/jcs-auto-validate.min.js"></script>

Inject the jcs-auto-validate into your application

angular.module('my-app', ['jcs-autoValidate']);

If you are using bootstrap 3 that’s it, unless you wish the valid and invalid states of your controls to be indicated via icons, otherwise auto-validate is setup!

angular.module('my-app')
        .run([
        'bootstrap3ElementModifier',
        function (bootstrap3ElementModifier) {
              bootstrap3ElementModifier.enableValidationStateIcons(true);
       }]);

Your Form


Now that you are using auto-validate you haven’t got to worry about putting your error messages in you html or using any angular expressions to show or hide them depending on the validation state. So now your form markup remains clean and maintainable


<form name="signupFrm" novalidate="novalidate">
    <div class="form-row">
        <label>Username:</label>
        <input name="username"
            ng-model="model.username"
            ng-minlength="3"
            ng-maxlength="10"
            required/>
    </div>
    <div class="form-row">
        <label>Password:</label>
        <input name="password"
            type="password"
            ng-model="model.password"
            ng-minlength="3"
            ng-maxlength="10"
            required/>
    </div>
</form>

angular-auto-validate

See http://jonsamwell.github.io/angular-auto-validate/ and my original blog post for more information http://jonsamwell.com/dynamic-angularjs-validation/

There is also more information available in the wiki https://github.com/jonsamwell/angular-auto-validate/wiki

See a demo here http://plnkr.co/edit/R4vGhrSYvKJREMV7Q4rC?p=preview

Javscript

Javascript plugin

Angular-js