angular-validation

Requirement

AngularJS > 1.2.4

DEMO

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

Using angular-validation

angular.module('yourApp',['validation']);

Writing your Code

Add Valid Message (error, success) for validation required
required-error-message and required-success-message

<label>Required</label><inputtype="text"
name="require"
ng-model="form.required"
validator="required"
required-error-message="Required"
required-success-message="Good Required"/><!-- or you can try required-error-message="{{ RequiredMsg }}" -->

Add Valid Message (error, success) for validation email
email-error-message and email-success-message

<label>Email</label><inputtype="text"
name="email"
ng-model="form.email"
validator="email"
email-error-message="Error Number"
email-success-message="Good Email"/>

Use Default Valid Message
you don't need to give valid message

<label>Number</label><inputtype="text" name="number" ng-model="form.number" validator="number"/>

Don't show the Valid Message no-validation-message="true"

<label>Number</label><inputtype="text" name="number" ng-model="form.number" validator="number" no-validation-message="true"/><!-- or {{ your.Scope.Name }} --><inputtype="text" name="number" ng-model="form.number" validator="number" no-validation-message="{{ noValidationMessage }}"/>

Add Valid Callback Function, invalid-callback & valid-callback

<label>Required (Invalid Callback alert)</label><inputtype="text" name="requiredCallback" ng-model="form.requiredCallback" validator="required" invalid-callback='error("Must be Required");'/>

Select the validation method watchblursubmit, default as watch
validationProvider.validate($scope, form).success(callback).error(callback) use callback to continue your submit

<label>Watch method</label><inputtype="text" name="number" ng-model="form.number" validator="number" valid-method="watch"/><inputtype="text" name="number" ng-model="form.number" validator="number"/><label>Blur method</label><inputtype="text" name="number" ng-model="form.number" validator="number" valid-method="blur"/><label>Submit method</label><formname="Form"><inputtype="text" name="number" ng-model="form.number" validator="number" valid-method="submit"/><buttonng-click="form.submit()"></button></form><script>// ... validate method, it will check `checkValid(Form)`$scope.form={submit: function(){$validationProvider.validate($scope,form).success(successCallback).error(errorCallback);}};// ...</script>

Setup a new Validation setExpression()setDefaultMsg() with RegExp or Function

<!-- View --><label>IP address (Custom setup the new validator - RegExp)</label><inputtype="text" name="ip" ng-model="form.ip" validator="ip"/><label>Huei (Custom setup the new validator - Function)</label><inputtype="text" name="huei" ng-model="form.huei" validator="huei"/>

// Controller// your moduleangular.module('yourApp',['validation']);// Now you can use validationProvider in your Angular Controllerfunctionvalidation($scope,$injector){varvalidationProvider=$injector.get('validationProvider');// inject validationProvider// Setup `ip` validationvarexpression={ip: /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/};varvalidMsg={ip: {error: 'This isn\'t ip address',success: 'It\'s ip'}};validationProvider.setExpression(expression);// set expressionvalidationProvider.setDefaultMsg(validMsg);// set valid message// Setup `huei` validationvalidationProvider.setExpression({/** * @param value , user input * @returns {boolean} true iff valid */huei: function(value){returnvalue==='Huei Tan';// or you can doreturn$q.all([obj]).then(function(){// ...returntrue;})}});validationProvider.setDefaultMsg({huei: {error: 'This should be Huei Tan',success: 'Thanks!'}});}

Check form whether valid, return true if valid. checkValid()
Reset the specific Form. reset()

<formname="Form">
...
<!-- Check the entire form valid from angular-validation `valid` --><buttonng-disabled="form.checkValid()"></button><!-- or Check the specific form(Form) valid from angular `$valid` --><buttonng-disabled="form.checkValid(Form)"></button><!-- Reset the specific Form --><buttonng-click="form.reset(Form)"></button></form>

// ... checkValid$scope.form.checkValid=validationProvider.checkValid;// ... reset$scope.form.reset=function(form){validationProvider.reset($scope,form);};

Set the valid/invalid message style CSS

<span><pclass="validation-valid">Your valid message here<p></span><span><pclass="validation-invalid">Your invalid message here<p></span>

.validation-valid {
<!-- valid style -->
}
.validation-invalid {
<!-- invalid style -->
}

Custom the valid/invalid message style HTML in .config(),
setErrorHTML(func)setSuccessHTML(func), input should be a function and given parameter which is the valid/invalid message declared in getDefaultMsg(),and finally return the HTML code

// your angular.config(function($validationProvider){$validationProvider.setErrorHTML(function(msg){// remember to return your HTML// eg: return '<p class="invalid">' + msg + '</p>';});$validationProvider.setSuccessHTML(function(msg){// eg: return '<p class="valid">' + msg + '</p>';});});

Built-in validation in angular-validation

1. Required
2. Url
3. Email
4. Number

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

Developer Adding a new validation

Clone the repo to your computer

git clone https://github.com/huei90/angular-validation.git

Download the dependencies

npm install

Before coding Boot the Environment

grunt dev

Start coding

open `provider.js`, looking for `var expression` and `var defaultMsg`
Adding a new expression and defaultMsg to extend it

IP validation As the example

// provider.jsvarexpression={required: /.+/gi,
... // add new expression belowip: /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/};vardefaultMsg={required: {error: 'This should be Required!!',success: 'It\'s Required'},
... // add new valid message belowip: {error: 'This isn\'t ip',success: 'It\'s IP'}};

Test

Karma Test done by Travis-ci,
When you are done, test it on `http://localhost:8080`

Give me a PR Thanks for it