JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Angular Validation

    Customizing Form Valid Message in AngularJS
    Filed under 

    • 🔾46%Overall
    • 717
    • 13.8 days
    • 🕩196
    • 👥20

    angular-validation 1.4.4

    NPM version Build Status Code Climate Coverage Status devDependency Status Gitter chat

    Client-side Validation should be simple and clean.
    Don't let Client-side Validation dirty your controller.

    Setup your Validation on config phase by using some rules (example)
    If you prefer schema over html attributes , try angular-validation-schema (Demo)
    And add Validation in your view only.

    angularjs 1.2.x support to version angular-validation 1.2.x
    angularjs 1.3.x support after version angular-validation 1.3.x
    angularjs 1.4.x support after version angular-validation 1.4.x

    Requirement

    AngularJS 1.2.x (for angular-validation 1.2.x)
    AngularJS 1.3.x (for angular-validation 1.3.x)
    AngularJS 1.4.x (for angular-validation 1.4.x)

    DEMO

    http://hueitan.github.io/angular-validation/

    Install

    Install with npm

    npm install angular-validation
    

    or with bower

    bower install angular-validation
    

    Using angular-validation

    <script src="dist/angular-validation.js"></script>
    <script src="dist/angular-validation-rule.js"></script>
    
    angular.module('yourApp', ['validation']);
    
    // OR including your validation rule
    angular.module('yourApp', ['validation', 'validation.rule']);
    

    Writing your First Code

    <form name="Form">
        <div class="row">
            <div>
                <label>Required</label>
                <input type="text" name="required" ng-model="form.required" validator="required">
            </div>
            <div>
                <label>Url</label>
                <input type="text" name="url" ng-model="form.url" validator="required, url">
            </div>
            <button validation-submit="Form" ng-click="next()">Submit</button>
            <button validation-reset="Form">Reset</button>
        </div>
    </form>
    

    Documentation API

    Built-in validation in angular-validation-rule

    1. Required
    2. Url
    3. Email
    4. Number
    5. Min length
    6. Max length

    5 and 6 require you to pass an inline parameter to set the length limit. Eg, maxlength=6.

    Anyone can give a PR for this angular-validation for more built-in validation

    Integrating with Twitter Bootstrap

    To integrate this package with Bootstrap you should do the following.

    Add the following LESS to your project

    .ng-invalid.ng-dirty{
        .has-error .form-control;
    }
    
    label.has-error.control-label {
        .has-error .control-label;
    }
    

    Change the Error HTML to something like:

    $validationProvider.setErrorHTML(function (msg) {
           return  "<label class=\"control-label has-error\">" + msg + "</label>";
    });
    

    You can add the bootstrap class .has-success in a similar fashion.

    To toggle .has-error class on bootstrap .form-group wrapper for labels and controls, add:

    angular.extend($validationProvider, {
        validCallback: function (element){
            $(element).parents('.form-group:first').removeClass('has-error');
        },
        invalidCallback: function (element) {
            $(element).parents('.form-group:first').addClass('has-error');
        }
    });
    

    License

    MIT

    CHANGELOG

    See release

    CONTRIBUTORS

    Thank you for your contribution @lvarayut and @Nazanin1369 :heart:
    Thanks for all contributors

    Show All