diff --git a/.travis.yml b/.travis.yml index 6bca260..b066bcb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,9 +1,10 @@ +sudo: false # use container-based virtualization environment language: node_js node_js: - - "0.10" - - "0.11" + - "6" # Node.js LTS maintained until April 2019, https://github.com/nodejs/lts + - "node" # latest stable Node.js release before_script: - export DISPLAY=:99.0 - sh -e /etc/init.d/xvfb start - 'npm install -g bower grunt-cli' - - 'bower install --config.interactive=false' \ No newline at end of file + - 'bower install --config.interactive=false' diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 266a13f..47319b4 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -6,13 +6,12 @@ Thanks for wanting to contribute. Please follow the instructions below. 1. Clone the repository 2. Run `bower install` in the repository directory 3. Run `npm install` in the repository directory -4. Run `grunt serve` to start servering the demo on `http://localhost:9001/demo/` - +4. Run `grunt serve` to start serving the demo on `http://localhost:9001/demo/` ## Before creating a pull request 1. Make sure you add tests to `/test/angular-validator-spec.js` that test your changes. To run tests `grunt test` -2. If approriate update the readme to reflect your changes. +2. If appropriate update the README to reflect your changes. 3. Run `grunt build` to minify and create a `dist` version of your changes -4. If approriate update the demo in /demo/ +4. If appropriate update the demo in /demo/ 5. The project maintainer will update the Plunker demo that is linked in README.md if needed. \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js index 9f4cbc4..0b7eacb 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,3 +1,8 @@ +/*jslint node: true */ +'use strict'; + +var pkg = require('./package.json'); + module.exports = function(grunt) { // Grunt Config @@ -21,6 +26,12 @@ module.exports = function(grunt) { "dest": "dist/angular-validator.js" } }, + ngAnnotate: { + main: { + src: 'dist/angular-validator.js', + dest: 'dist/angular-validator.js' + }, + }, uglify: { dist: { src: "dist/angular-validator.js", @@ -66,6 +77,7 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-connect'); + grunt.loadNpmTasks('grunt-ng-annotate'); // Load the plugin that provides the "jshint" task. grunt.loadNpmTasks('grunt-contrib-jshint'); @@ -81,8 +93,8 @@ module.exports = function(grunt) { // Register Task grunt.registerTask('serve', ['connect', 'watch']); - grunt.registerTask('build', ['concat', 'uglify', 'karma:build',]); - grunt.registerTask('test', ['karma:build',]); + grunt.registerTask('build', ['concat', 'ngAnnotate', 'uglify', 'karma:build']); + grunt.registerTask('test', ['karma:build', ]); grunt.registerTask('test-debug', ['karma:debug']); grunt.registerTask('travis', ['karma:travis']); }; \ No newline at end of file diff --git a/README.md b/README.md index 1a552d7..34d6850 100644 --- a/README.md +++ b/README.md @@ -1,39 +1,31 @@ # Angular-Validator [![Build Status](https://travis-ci.org/turinggroup/angular-validator.png)](https://travis-ci.org/turinggroup/angular-validator) - -## What? Angular-Validator is an easy to use, powerful and lightweight AngularJS validation directive. - -## Why? -Despite Angular's awesomeness, validation in Angular is still a pain in the ass. Surprisingly there are no seamless, user-friendly, well written Angular validation tools. Unlike other Angular validation tools, Angular-Validator works with out-of-the-box Angular and HTML5 validation, directives and attributes, allowing your forms to work well with the browser and other Javascript code. - +## Demo +[Check out the demo!](http://plnkr.co/edit/XbDYKrM2QUf8g1ubTHma?p=preview) ## Features -* Validate using REGEX, required, or custom validation functions -* Validates elements on submit with option to validate individual elements on `blur` or `dirty` as well. +* Validate using regex, HTML5, or custom validation functions. +* Works seamlessly with all native AngularJS validation directives and native HTML5 validation attributes. +* Supports custom validation message templates and placement using Angular's native `ngMessages` directive. +* Choose when to validate elements, on per-element basis. Choose between on form `submission`, `blur` or `dirty`(change). +* All validation states and validation messages are accessible through `$scope.yourFormName.elementName`. * Prevents submission if the form is invalid -* Built in reset form method -* Adds validation error/success messages as sibling elements -* Adds `.has-error` classes to invalid elements -* Adds `.has-error` classes to validation message +* Built in `reset()` form method * Supports multi-field dependent validation (one field depends on another such as password matching) -* Works with or without `novalidate` * Works with Bootstrap out of the box (although Bootstrap is not required) +* Optionally adds `.has-error` classes to invalid form and message message elements so you don't have to. +* Supports form invalid message service where manage invalid messages in one place and save code in HTML - -## Demo -[Check out the demo!](http://plnkr.co/edit/XbDYKrM2QUf8g1ubTHma?p=preview) - - -## Feedback -Need a feature, found a bug? Create an issue. Dont have any issues, love the project? Give it a star! +## Why? +Despite Angular's awesomeness, validation in Angular is still annoying. Surprisingly there are no seamless, user-friendly, well written Angular validation tools. Unlike other Angular validation tools, Angular-Validator works with out-of-the-box Angular and HTML5 validation, directives and attributes, allowing your forms to work well with the browser and other Javascript code. ## Installation -1. Using bower: `bower install tg-angular-validator` -2. Include `angular-validator.min.js` into your application's HTML -3. Add `angularValidator` as a dependancy of your Angular module +1. Using bower: `bower install tg-angular-validator`. +2. Include `angular-validator.min.js`. +3. Add `angularValidator` as a dependency of your Angular module. ## Usage @@ -50,7 +42,7 @@ Need a feature, found a bug? Create an issue. Dont have any issues, love the pro + validator = "myValidationFunction(person.firstName)"> ``` **Usage with validation on blur** @@ -59,7 +51,7 @@ Need a feature, found a bug? Create an issue. Dont have any issues, love the pro name = "firstName" ng-model = "person.firstName" validate-on="blur" - validator = "myCustomValidationFunction(form.firstName)"> + validator = "myValidationFunction(person.firstName)"> ``` **Usage with validation on dirty** @@ -68,7 +60,7 @@ Need a feature, found a bug? Create an issue. Dont have any issues, love the pro name = "firstName" ng-model = "person.firstName" validate-on="dirty" - validator = "myCustomValidationFunction(form.firstName)"> + validator = "myValidationFunction(person.firstName)"> ``` **Usage with custom validator literal** @@ -76,7 +68,7 @@ Need a feature, found a bug? Create an issue. Dont have any issues, love the pro + validator = "person.firstname === 'john'"> ``` **Usage with REGEX and required** @@ -84,7 +76,7 @@ Need a feature, found a bug? Create an issue. Dont have any issues, love the pro ``` @@ -93,7 +85,7 @@ Need a feature, found a bug? Create an issue. Dont have any issues, love the pro @@ -104,37 +96,71 @@ Need a feature, found a bug? Create an issue. Dont have any issues, love the pro ``` * Note that the validator and the message function do not need to be the same function. If you choose to make them the same function make sure to return `true` on valid input. +**Usage without auto-generated error label** + +``` + +``` + +Use `angular-validator-quiet` on an element to prevent the auto-generation of new DOM element `label` after this inputs. You then have complete control over the location and classes used to show the error messages. + **Setting up the form** ``` -
- - + .... - + .... +
``` Use `angular-validator-submit` to specify the function to be called when the form is submitted. Note that the function is not called if the form is invalid. + +**Use form invalid message service** +``` +
+ +
+``` +Use `invalid-message` on form element to provide the name of the service in which invalid messages are managed. You need to provide a `message` function in your service, which returns the messages you defined. Form invalid message service saves repetitive code in HTML because you do not need to use invalid-message attribute on every field. Please see the demo for examples. + +**Usage form without auto-generated error label** + +``` +
+``` + +Use `angular-validator-quiet` on form element to prevent the auto-generation of new DOM element `label` after all of this forms inputs. + **Resetting the form** ``` -myBeautifulForm.reset() +myFormName.reset() ``` +*You need to include a `name` attribute on the form to use this.* + -**Validty API** -Uses standard Angular `$valid` and `$invalid` properties +**Validity API** +Uses standard Angular `$valid` and `$invalid` properties so that it can work with core angular and third party libraries! ``` -myForm.$invalid -myForm.$valid -myElement.$valid -myElement.$invalid -myElement.$angularValidator +formName.$invalid +formName.$valid +elementName.$valid +elementName.$invalid +elementName.$angularValidator ``` ## FAQ diff --git a/bower.json b/bower.json index 35cf191..73cd382 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "tg-angular-validator", - "version": "1.2.5", + "version": "1.2.10", "authors": [ "Zohar Jackson " ], @@ -31,8 +31,11 @@ ], "dependencies": { "angular": ">=1.3.0", - "bootstrap": ">=3.2.0", - "font-awesome": ">=4.0.3" + "jquery": "~2.1.4" + }, + "devDependencies": { + "angular-mocks": "^1.6.2", + "angular-messages": "^1.6.2" }, "homepage": "https://github.com/turinggroup/angular-validator" } diff --git a/demo/app.js b/demo/app.js index bf45201..e83355e 100644 --- a/demo/app.js +++ b/demo/app.js @@ -1,4 +1,4 @@ -angular.module('angular-validator-demo', ['angularValidator']); +angular.module('angular-validator-demo', ['angularValidator', 'ngMessages']); angular.module('angular-validator-demo').controller('DemoCtrl', function($scope) { @@ -37,4 +37,19 @@ angular.module('angular-validator-demo').controller('DemoCtrl', function($scope) return true; }; +}).factory('customMessage', function () { + // invalid message service with message function + return { + // scopeElementModel is the object in scope version, element is the object in DOM version + message: function (scopeElementModel, element) { + var errors = scopeElementModel.$error; + if (errors.maxlength) { + // be careful with the quote + return "'Should be no longer than " + element.attributes['ng-maxlength'].value + " characters!'"; + } else { + // default message + return "'This field is invalid!'"; + } + } + }; }); \ No newline at end of file diff --git a/demo/index.html b/demo/index.html index e6f00ab..e14d181 100644 --- a/demo/index.html +++ b/demo/index.html @@ -2,21 +2,16 @@ Angular-Validator Demo - - - - +

Angular-Validator Demo

https://github.com/turinggroup/angular-validator
-

Choose when to validate:

@@ -145,6 +140,120 @@

Password validation and password matching example

+ +
+

Form invalid message:

+
+ +
+
+
+
+

Field invalid message hides form invalid message

+
+ +
+
+
+
+
+
+ + +
+
+
+ +
+

Using Field angular-validator-quiet (with angular-messages)

+
+ +
+
+
+
"Required" message with manual template
+
"Max Length" message with manual template
+
+
+
+ +
+
+
+
+
+
+ + +
+
+ +
+ +
+

Using Form angular-validator-quiet (with angular-messages)

+
+ +
+
+
+
"Required" message with manual template
+
"Max Length" message with manual template
+
+
+
+ +
+
+
+
"Required" message with manual template
+
"Max Length" message with manual template
+
+
+
+
+
+ + +
+
+ +
+

Scope Sneak Peak

@@ -156,8 +265,10 @@

Scope Sneak Peak

Form submitted: {{myForm.submitted}}

- + + + \ No newline at end of file diff --git a/dist/angular-validator.js b/dist/angular-validator.js index 1713b03..d867a7b 100644 --- a/dist/angular-validator.js +++ b/dist/angular-validator.js @@ -1,28 +1,68 @@ angular.module('angularValidator', []); -angular.module('angularValidator').directive('angularValidator', - function() { +angular.module('angularValidator').directive('angularValidator', ['$injector', '$parse', '$compile', + function($injector, $parse, $compile) { return { restrict: 'A', link: function(scope, element, attrs, fn) { + var getRandomInt = function() { + return Math.floor((Math.random() * 100000)); + }; + + // For this directive to work the form needs a name attribute as well as every input element. + // This function will add names where missing + var need_to_recompile = false; + + // Iterate through all the children of the form element and add a `name` attribute to the ones + // that are missing it. + angular.forEach(element.find('input,select,textarea'), function(child_element) { + child_element = $(child_element); + if (!child_element.attr('name')) { + child_element.attr('name', getRandomInt()); + console.log('WARNING! AngularValidator -> One of your form elements(,