index.html
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width" />
<meta name="distribution" content="global" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="author" content="Huei Tan" />
<meta name="publisher" content="Huei Tan" />
<meta name="rating" content="general" />
<meta name="robots" content="all" />
<meta name="spiders" content="all" />
<meta name="webcrawlers" content="all" />
<meta name="company" content="angular-validation" />
<meta name="abstract" content="Client-side Validation for AngularJS" />
<!-- <link rel="SHORTCUT ICON" type="image/x-icon" href="/images/favicon.ico" sizes="16x16 24x24 32x32 48x48 64x64" />
<link rel="icon" type="image/x-icon" href="/images/favicon.ico" sizes="16x16 24x24 32x32 48x48 64x64" /> -->
<meta name="subject" content="angular-validation" />
<meta name="description" content="Client-side Validation for AngularJS" />
<meta name="keywords" content="angular","angularjs","validation","angular validation","validator","client-side" />
<meta property="og:title" content="angular-validation" />
<meta property="og:url" content="http://hueitan.github.io/angular-validation/" />
<meta property="og:description" content="Client-side Validation for AngularJS" />
<meta property="og:image" content="//avatars0.githubusercontent.com/u/2560096?v=3&s=460" />
<title>Angular Validation</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"/>
<!-- Bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css"/>
<!-- AngularJs ui-select CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.13.2/select.min.css"/>
<!-- Highlight CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/monokai-sublime.min.css">
<link rel="stylesheet" href="demo/main.css"/>
</head>
<body role="document" ng-controller="index">
<div class="container" style="padding-bottom: 20px;">
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Angular Validation</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#getting_started">Getting started</a></li>
<li><a href="#style_guide">Style guide</a></li>
<li><a href="#examples">Examples</a></li>
<li><a href="https://github.com/hueitan/angular-validation/blob/master/API.md" target="_blank">API</a></li>
<li><a href="https://github.com/hueitan/angular-validation/issues" target="_blank">Report an issue</a></li>
</ul>
</div>
</div>
</nav>
<header class="bs-docs-header" tabindex="-1" id="#">
<div class="hidden-xs" style="height: 40px;"></div>
<div class="container">
<h1>Angular Validation</h1>
<p> Client-side Validation should be simple and clean. </p>
</div>
</header>
<div class="container theme-showcase" role="main">
<section id="getting_started">
<div class="hidden-xs" style="height: 40px;"></div>
<div class="page-header">
<h2>Getting Started</h2>
</div>
<h3>Requirements</h3>
<br/>
<p><strong> AngularJS 1.2.x </strong>(for angular-validation 1.2.x)</p>
<p><strong> AngularJS 1.3.x </strong>(for angular-validation 1.3.x)</p>
<h3>Installation</h3>
<br/>
<div>
<p>Install with npm</p>
<pre><code>npm install angular-validation </code></pre>
<p>Or with Bower</p>
<pre><code>bower install angular-validation </code></pre>
</div>
<br/>
<h3>Files to download</h3>
<br/>
<p>Add the files to your html</p>
<pre><code><script src="dist/angular-validation.js"></script>
<script src="dist/angular-validation-rule.js"></script></code></pre>
<p>If you are using Bower: </p>
<pre><code><script src="lib/angular-validation/dist/angular-validation.js"></script>
<script src="lib/angular-validation/dist/angular-validation-rule.js"></script></code></pre>
<pre><code>angular.module('yourApp', ['validation']);</code></pre>
<p>Including your validation rule</p>
<figure class="highlight">
<pre class="javascript"><code>angular.module('yourApp', ['validation', 'validation.rule']);</code></pre>
</figure>
<br/>
<h3>Writing your first code</h3>
<figure class="highlight">
<pre><code class="html"><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></code></pre>
</figure>
</section>
<!-- ********Style guide******* -->
<section id="style_guide">
<div class="hidden-xs" style="height: 40px;"></div>
<div class="page-header">
<h2>Style Guide</h2>
</div>
<p>You can style different states of your form elements using the following selectors</p>
<span class="label label-danger" style="margin-left: 2px;">Invalid Selectors</span>
<figure class="highlight">
<pre><code class="css">.ng-invalid.ng-dirty { /* Your style here */ }</code></pre>
</figure>
<span class="label label-success" style="margin-left: 2px;">Valid Selectors</span>
<figure class="highlight">
<pre><code class="css">.ng-valid.ng-dirty { /* Your style here */ }</code></pre>
</figure>
<br/>
<p>
You can also include your vendor libraries classes in you are using CSS preprocessors such as
<a href="http://lesscss.org/">LESS</a> or
<a href="http://sass-lang.com/">SASS</a>.
</p>
<span class="label label-info" style="margin-left: 2px;">Using Bootstrap classes</span>
<figure class="highlight">
<pre><code class="css">.ng-valid.ng-dirty { .has-error .form-control; }</code></pre>
</figure>
<br/>
<p> For more on AngularJS validation classes check at their
<a href="https://docs.angularjs.org/guide/forms">documentation</a>.
</section>
<!-- ********Examples******* -->
<section id="examples">
<div class="hidden-xs" style="height: 40px;"></div>
<div class="page-header">
<h2>Examples</h2>
</div>
<!--- Form1 -->
<div class="page-header">
<form name="Form" id="form1">
<fieldset>
<legend>Form ($watch)</legend>
<div style="margin-bottom:20px;">
<label for="email">Email</label>
<input type="text" class="form-control"
name="emailWatch"
ng-model="form.email"
validator="email"
email-error-message="Error Email"
email-success-message="Good Email"
message-id="emailWatch"
id="email"/>
<span id="emailWatch"></span>
<label for="number">Number</label>
<input type="text" class="form-control"
name="numberWatch"
ng-model="form.number"
validator="number"
email-error-message="Error Number"
email-success-message="Good Number",
message-id="numberWatch"
id="number"/>
<span id="numberWatch"></span>
</div>
<div class="btn-group" role="group">
<button class="btn btn-primary" ng-click="showcodewatch = !showcodewatch">
<span ng-hide="showcodewatch">Show Code</span>
<span ng-show="showcodewatch">Hide Code</span>
</button>
</div>
<pre ng-show="showcodewatch"><code class="html"><!-- default valid-method is watch -->
<input type="text" name="emailBlur" ng-model="form.email" validator="email"/></code></pre>
</fieldset>
</form>
</div>
<!--- Form2 -->
<div class="page-header">
<form name="Form" id="form2">
<fieldset>
<div class="m-b-20">
<legend>Form ($blur)</legend>
<label>Name</label>
<input class="form-control" type="text" name="requireBlur" ng-model="form2.required" validator="required" valid-method="blur"/>
<label>Email</label>
<input class="form-control" type="text" name="emailBlur" ng-model="form2.email" validator="email" valid-method="blur"/>
</div>
<div class="btn-group" role="group">
<button class="btn btn-primary" ng-click="showcodeblur = !showcodeblur">
<span ng-hide="showcodeblur">Show Code</span>
<span ng-show="showcodeblur">Hide Code</span>
</button>
</div>
<pre ng-show="showcodeblur"><code class="html"><input type="text" name="emailBlur" ng-model="form.email" validator="email" <span data-tooltip aria-haspopup="true" class="has-tip" title="valid method type set to blur">valid-method="blur"</span>/></code></pre>
</fieldset>
</form>
</div>
<!--- Form3 -->
<div class="page-header">
<form name="Form3" id="form3">
<fieldset>
<div class="m-b-20">
<legend>Form ($submit with callback)</legend>
<label>Required</label>
<input class="form-control" type="text" name="requireSubmit" ng-model="form3.required" validator="required" valid-method="submit" message-id="requireSubmit"/>
<span id="requireSubmit"></span>
<label>Url</label>
<input class="form-control" type="text" name="urlSubmit" ng-model="form3.url" validator="url" valid-method="submit" message-id="urlSubmit"/>
<span id="urlSubmit"></span>
<label>Email</label>
<input class="form-control" type="text" name="emailSubmit" ng-model="form3.email" validator="email" valid-method="submit" message-id="emailSubmit"/>
<span id="emailSubmit"></span>
<label>Number</label>
<input class="form-control" type="text" name="numberSubmit" ng-model="form3.number" validator="number" valid-method="submit" message-id="numberSubmit"/>
<span id="numberSubmit"></span>
</div>
<div class="btn-group" role="group">
<button class="btn btn-success" ng-click="form3.submit(Form3)">Submit</button>
<button class="btn btn-danger" ng-click="form3.reset(Form3)">Reset</button>
<button class="btn btn-info" ng-disabled="!form3.checkValid(Form3)">checkValid = {{ form3.checkValid(Form3) }}</button>
</div>
</fieldset>
</form>
</div>
<!--- Form4 -->
<div class="page-header">
<form name="Form4" id="form4">
<fieldset>
<div class="m-b-20">
<legend>Form (Additions validation)</legend>
<div class="input-group m-b-20" style="width: 50%;">
<input type="text" class="form-control" validator="huei" name="huei" ng-model="form4.huei" placeholder="It's must be 'Huei Tan'" message-id="huei">
<span class="input-group-addon">With <a href="https://github.com/hueitan/angular-validation#custom-function-huei" target="_blank">Function</a> </span>
</div>
<span id="huei"></span>
<div class="input-group m-b-20" style="width: 50%;">
<input type="text" class="form-control" validator="huei" name="noMsg" ng-model="form4.noMsg" no-validation-message="true" placeholder="It's must be 'Huei Tan'" message-id="noMsg">
<span class="input-group-addon">
<span ng-if="!Form4.noMsg.$valid">type: Huei Tan</span>
<span ng-if="Form4.noMsg.$valid"><a href="https://github.com/hueitan/angular-validation#no-validation-message" target="_blank">no-validation-message</a></span>
</span>
</div>
<div class="input-group m-b-20" style="width: 50%;">
<input type="text" class="form-control" validator="huei" name="canChange" huei-error-message="{{ form4.changeErrorMsg }}" ng-model="form4.canChange" placeholder="Type Wrong !!" message-id="canChange">
<span class="input-group-addon">
<span ng-if="!form4.show"><a href="javascript:void(0);" ng-click="form4.changeMsg();form4.show = true;">Change Error Msg</a></span>
<span ng-if="form4.show">Type Again <a href="https://github.com/hueitan/angular-validation/blob/master/demo/demo.js#L45" target="_blank">#</a></span>
</span>
</div>
<span id="canChange"></span>
<input type="text" class="form-control m-b-20" validator="range" name="range" ng-model="form4.range" placeholder="number 5~10" min="5" max="10" message-id="range">
<span id="range"></span>
<input type="text" class="form-control m-b-20" validator="required, range" name="multiple" ng-model="form4.multiple" placeholder='number 5~10 with required (validator="required, range")' min="5" max="10" message-id="multiple">
<span id="multiple"></span>
</div>
</fieldset>
</form>
</div>
<!--- Form5 -->
<div class="page-header">
<form name="Form5" id="form5">
<fieldset>
<div class="m-b-20">
<legend>Form ($submit-only)</legend>
<label>Required</label>
<input type="text" class="form-control m-b-20" name="emailRequiredOnly" ng-model="form5.required" validator="required" valid-method="submit-only" message-id="emailRequiredOnly"/>
<span id="emailRequiredOnly"></span>
<label>Email</label>
<input type="text" class="form-control m-b-20" name="emailSubmitOnly" ng-model="form5.email" validator="email" valid-method="submit-only" message-id="emailSubmitOnly"/>
<span id="emailSubmitOnly"></span>
<label>Lucky Number</label>
<select class="form-control" name="selectBlur" ng-model="form5.select" validator="required" message-id="selectBlur">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<span id="selectBlur"></span>
<div class="row">
<div class="checkbox">
<label for="checkbox1">
<input id="checkbox1" type="checkbox" name="checkBlur1" ng-model="form5.check1" validator="required" validation-group="checkBlur"/>
Checkbox 1
</label>
</div>
<div class="checkbox">
<label for="checkbox2">
<input id="checkbox2" type="checkbox" name="checkBlur2" ng-model="form5.check2" validator="required" validation-group="checkBlur"/>
Checkbox 2
</label>
</div>
</div>
<span id="checkBlur"></span>
<div class="radio">
<input id="radio1" type="radio" name="radioBlur" ng-model="form5.radio" validator="required" message-id="checkRadio" value="1"/>
<label for="radio1">Radio 1</label>
</div>
<span id="checkRadio"></span>
</div>
<div class="btn-group" role="group">
<button class="btn btn-success" ng-click="form5.submit(Form5)">Submit</button>
<button class="btn btn-danger" ng-click="form5.reset(Form5)">Reset</button>
<button class="btn btn-info" ng-disabled="!form5.checkValid(Form5)">checkValid = {{ form5.checkValid(Form5) }}</button>
</div>
</fieldset>
</form>
</div>
<!--- Form6 -->
<div class="page-header">
<form name="Form6" id="form6">
<fieldset>
<div class="m-b-20">
<legend>Form (ng-repeat)</legend>
<label>Required</label>
<div ng-repeat="a in form6.required">
<input type="text" class="form-control m-b-20" name="emailRequiredOnly{{$index}}" ng-model="a.required" validator="required" message-id="emailRequiredOnly{{$index}}"/>
<span id="emailRequiredOnly{{$index}}"></span>
</div>
<blockquote ng-non-bindable>
<label>In name attribute we have to use {{$index}}
<cite>eg. emailRequiredOnly{{$index}}</cite></label>
</blockquote>
</div>
<div class="btn-group" role="group">
<button class="btn btn-success" validation-submit="Form6">Submit</button>
<button class="btn btn-danger" validation-reset="Form6">Reset</button>
<button class="btn btn-info" ng-disabled="!form6.checkValid(Form6)">checkValid = {{ form6.checkValid(Form6) }}</button>
</div>
</fieldset>
</form>
</div>
<!--- Form7 -->
<div class="page-header">
<form name="Form7" id="form7">
<fieldset>
<div class="m-b-20">
<legend>Bootstrap DatePicker</legend>
<label>Required</label>
<div>
<p class="input-group" style="width: 40%;">
<input type="text" class="form-control m-b-20" uib-datepicker-popup="dd-MMMM-yyyy" ng-model="form7.dt" is-open="form7.status.opened" datepicker-options="form7.dateOptions" close-text="Close" validator="required" message-id="bootstrap"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="form7.open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<span id="bootstrap"></span>
</div>
</div>
</fieldset>
</form>
</div>
<!--- Form8 -->
<div class="page-header">
<form name="Form8" id="form8">
<fieldset>
<div class="m-b-20">
<legend>AngularJs ui-select</legend>
<div class="row">
<div class="col-xs-12">
<label>Required, Selected: {{form8.country.selected}}</label>
</div>
<div class="col-xs-6">
<ui-select ng-model="form8.country.selected" theme="bootstrap"
ng-disabled="form8.disabled"
style="width: 100%;"
validator="required"
message-id="ui-select">
<ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="country in form8.countries" refresh-delay="0">
<span ng-bind-html="country.name"></span>
<small ng-bind-html="country.code"></small>
</ui-select-choices>
</ui-select>
<br/>
<span id="ui-select"></span>
</div>
<div class="col-xs-4">
<button class="btn btn-primary" ng-click="form8.clear()">Clear ng-model</button>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</section>
</div>
</div>
<a href="https://github.com/hueitan/angular-validation" target="_blank"><img src="demo/iconmonstr-github-10-icon-128.png" id="github-link" alt="Fork me on Github"/></a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.13.2/select.min.js"></script>
<script src="dist/angular-validation.js"></script>
<script src="dist/angular-validation-rule.js"></script>
<script src="demo/demo.js"></script>
<script>
((window.gitter = {}).chat = {}).options = {
room: 'hueitan/angular-validation'
};
</script>
<script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>
<script>
hljs.initHighlightingOnLoad();
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-62825613-1', 'auto');
ga('send', 'pageview');
</script>
<script>
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
</script>
</body>
</html>