angular-form-validator
Version:
Angular validation directive with validation rules and error messages.
439 lines (354 loc) • 17.2 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>angular-form-validator Examples</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./dist/css/ngFormValidator.css">
</head>
<body ng-app="ngFormValidator" style="padding-top:25px">
<div class="container" ng-controller="NgFormValidatorCtrl">
<!-- bootstrap form -->
<h3><a href="http://getbootstrap.com/" target="_blank">Bootstrap</a> form</h3>
<form action="#" method="POST" enctype="application/x-www-form-urlencoded" class="form-horizontal">
<h4>TYPE VALIDATORS</h4>
<div ng-class="{'form-group': true, 'has-error': errMsg.fname}">
<label for="fname" class="col-sm-3 control-label">* First name <small>(string onKeyup)</small></label>
<div class="col-sm-5">
<input type="number" id="fname" class="form-control"
ng-model="fname"
ngform-validator="{type: 'string', required: 'Name field is required.'}"
ngform-validator-options="{validateOn: 'keyup'}">
<p class="help-block" ng-cloak>{{errMsg.fname}}</p>
</div>
<div class="col-sm-2"><span style="font-size:smaller;float:right;">Intentional error because of type="number"</span></div>
</div>
<div ng-class="{'form-group': true, 'has-error': errMsg.age}">
<label for="age" class="col-sm-3 control-label">* Age <small>(number onChange)</small></label>
<div class="col-sm-2">
<input type="Text" id="age" class="form-control"
ng-init="age = 35"
ng-model="age"
ngform-validator="{type: 'number', required: 'This field is required.'}"
ngform-validator-options="{validateOn: 'change'}">
<p class="help-block" ng-cloak>{{errMsg.age}}</p>
</div>
</div>
<div ng-class="{'form-group': true, 'has-error': errMsg.qty}">
<label for="quantity" class="col-sm-3 control-label">* Quantity <small>(number, required onKeyup)</small></label>
<div class="col-sm-5">
<input type="number" id="quantity" class="form-control"
ng-model="qty"
ngform-validator="{type: 'number', required: 'Quantity field is required.'}"
ngform-validator-options="{validateOn: 'keyup'}">
<p class="help-block" ng-cloak>{{errMsg.qty}}</p>
</div>
</div>
<div ng-class="{'form-group': true, 'has-error': errMsg.tken}">
<label for="description" class="col-sm-3 control-label">* Token <small>(number, required onKeyup)</small></label>
<div class="col-sm-5">
<textarea type="number" id="description" class="form-control"
ng-model="tken"
ngform-validator="{type: 'number', required: 'Description field is required.'}"
ngform-validator-options="{validateOn: 'keyup'}"></textarea>
<p class="help-block" ng-cloak>{{errMsg.tken}}</p>
</div>
</div>
<div ng-class="{'form-group': true, 'has-error': errMsg.born}">
<label for="bornid" class="col-sm-3 control-label">Born <small>(date onChange)</small></label>
<div class="col-sm-5">
<input type="text" id="bornid" class="form-control"
placeholder="mm.dd.yyyy or mm/dd/yy hh:mm:ss"
ng-model="born"
ngform-validator="{type: 'date'}"
ngform-validator-options="{validateOn: 'change'}">
<p class="help-block" ng-cloak>{{errMsg.born}}</p>
</div>
</div>
<div ng-class="{'form-group': true, 'has-error': errMsg.reqd}">
<label for="reqd" class="col-sm-3 control-label">* Required <small>(number, required onChange)</small></label>
<div class="col-sm-5">
<input type="Text" id="reqd" class="form-control"
ng-model="reqd"
ng-init="reqdRules = {type: 'number', required: 'This field is required.'}"
ngform-validator="{{reqdRules}}"
ngform-validator-options="{validateOn: 'change'}">
<p class="help-block" ng-cloak>{{errMsg.reqd}}</p>
</div>
</div>
<br><br>
<h4>MIN, MAX, BETWEEN VALIDATORS</h4>
<div ng-class="{'form-group': true, 'has-error': errMsg.minstr}">
<label for="minstr" class="col-sm-4 control-label">Min string <small>(string, min:3 onKeyup)</small></label>
<div class="col-sm-3">
<input type="text" id="minstr" class="form-control"
ng-model="minstr"
ngform-validator="{type: 'string', min: ['The field must have min 3 chars.', 3]}"
ngform-validator-options="{validateOn: 'keyup'}">
<p class="help-block" ng-cloak>{{errMsg.minstr}}</p>
</div>
</div>
<div ng-class="{'form-group': true, 'has-error': errMsg.minnum}">
<label for="minnum" class="col-sm-4 control-label">Min number <small>(string, required, min:5 onKeyup)</small></label>
<div class="col-sm-3">
<input type="text" id="minnum" class="form-control"
ng-model="minnum"
ngform-validator="{type: 'number', required: 'This field is required!', min: ['Insert number greater or equal 5.', 5]}"
ngform-validator-options="{validateOn: 'keyup'}">
<p class="help-block" ng-cloak>{{errMsg.minnum}}</p>
</div>
</div>
<div ng-class="{'form-group': true, 'has-error': errMsg.maxstr}">
<label for="maxstr" class="col-sm-4 control-label">Max string <small>(string, max:3 onKeyup)</small></label>
<div class="col-sm-3">
<input type="text" id="maxstr" class="form-control"
ng-model="maxstr"
ngform-validator="{type: 'string', max: ['The field can have max 3 chars.', 3]}"
ngform-validator-options="{validateOn: 'keyup'}">
<p class="help-block" ng-cloak>{{errMsg.maxstr}}</p>
</div>
</div>
<div ng-class="{'form-group': true, 'has-error': errMsg.minmaxnum}">
<label for="minmaxnum" class="col-sm-4 control-label">Max Min number <small>(string, min:3, max:5 onKeyup)</small></label>
<div class="col-sm-3">
<input type="text" id="minmaxnum" class="form-control"
ng-model="minmaxnum"
ngform-validator="{
type: 'number',
required: 'This field is required!!!',
max: ['Num must be equal or less then 5.', 5],
min: ['Num must be equal or greater of 3.', 3]
}"
ngform-validator-options="{validateOn: 'keyup'}">
<p class="help-block" ng-cloak>{{errMsg.minmaxnum}}</p>
</div>
</div>
<div ng-class="{'form-group': true, 'has-error': errMsg.betweenstr}">
<label for="betweenstr" class="col-sm-4 control-label">Between string <small>(string, between:[3,5] onKeyup)</small></label>
<div class="col-sm-3">
<input type="text" id="betweenstr" class="form-control"
ng-model="betweenstr"
ngform-validator="{type: 'string', between: ['The field must have 3-8 chars.', [3,8]]}"
ngform-validator-options="{validateOn: 'keyup'}">
<p class="help-block" ng-cloak>{{errMsg.betweenstr}}</p>
</div>
</div>
<br><br>
<h4>STRING</h4>
<div ng-class="{'form-group': true, 'has-error': errMsg.al}">
<label for="al" class="col-sm-5 control-label">English letters only A-Z: <small>(string, alpha onKeyup)</small></label>
<div class="col-sm-3">
<input type="text" id="al" class="form-control"
ng-model="al"
ngform-validator="{type: 'string', alpha: 'Numbers and spec. chars are not allowed.'}"
ngform-validator-options="{validateOn: 'keyup'}">
<p class="help-block" ng-cloak>{{errMsg.al}}</p>
</div>
</div>
<div ng-class="{'form-group': true, 'has-error': errMsg.alnum}">
<label for="alnum" class="col-sm-5 control-label">No special chars: <small>(string, alphanumeric onKeyup)</small></label>
<div class="col-sm-3">
<input type="text" id="alnum" class="form-control"
ng-model="alnum"
ngform-validator="{type: 'string', alphanumeric: 'Spec. chars are not allowed.'}"
ngform-validator-options="{validateOn: 'keyup'}">
<p class="help-block" ng-cloak>{{errMsg.alnum}}</p>
</div>
</div>
<div ng-class="{'form-group': true, 'has-error': errMsg.lwer}">
<label for="lwer" class="col-sm-5 control-label">Lowercase: <small>(string, lowercase onKeyup)</small></label>
<div class="col-sm-3">
<input type="text" id="lwer" class="form-control"
ng-model="lwer"
ngform-validator="{type: 'string', lowercase: 'Use lowercase letters only.'}"
ngform-validator-options="{validateOn: 'keyup'}">
<p class="help-block" ng-cloak>{{errMsg.lwer}}</p>
</div>
</div>
<div ng-class="{'form-group': true, 'has-error': errMsg.uppr}">
<label for="uppr" class="col-sm-5 control-label">Uppercase: <small>(string, uppercase onKeyup)</small></label>
<div class="col-sm-3">
<input type="text" id="uppr" class="form-control"
ng-model="uppr"
ngform-validator="{type: 'string', uppercase: 'Use uppercase letters only.'}"
ngform-validator-options="{validateOn: 'keyup'}">
<p class="help-block" ng-cloak>{{errMsg.uppr}}</p>
</div>
</div>
<div ng-class="{'form-group': true, 'has-error': errMsg.ucfst}">
<label for="ucfst" class="col-sm-5 control-label">Ucfirst: <small>(string, ucfirst onKeyup)</small></label>
<div class="col-sm-3">
<input type="text" id="ucfst" class="form-control"
ng-model="ucfst"
ngform-validator="{type: 'string', ucfirst: 'Capitalize first letter.'}"
ngform-validator-options="{validateOn: 'keyup'}">
<p class="help-block" ng-cloak>{{errMsg.ucfst}}</p>
</div>
</div>
<br><br>
<h4>NUMBERS</h4>
<div ng-class="{'form-group': true, 'has-error': errMsg.numInt}">
<label for="numInt" class="col-sm-5 control-label">Integer number: <small>(number, int onKeyup)</small></label>
<div class="col-sm-3">
<input type="text" id="numInt" class="form-control"
ng-model="numInt"
ngform-validator="{type: 'number', int: 'Only integer will be accepted.'}"
ngform-validator-options="{validateOn: 'keyup'}">
<p class="help-block" ng-cloak>{{errMsg.numInt}}</p>
</div>
</div>
<div ng-class="{'form-group': true, 'has-error': errMsg.numFloat}">
<label for="numFloat" class="col-sm-5 control-label">Float number: <small>(number, float onChange)</small></label>
<div class="col-sm-3">
<input type="text" id="numFloat" class="form-control"
ng-model="numFloat"
ngform-validator="{type: 'number', float: 'Only float number will be accepted.'}"
ngform-validator-options="{validateOn: 'change'}">
<p class="help-block" ng-cloak>{{errMsg.numFloat}}</p>
</div>
</div>
<br><br>
<h4>OTHER VALIDATORS</h4>
<div ng-class="{'form-group': true, 'has-error': errMsg.eml}">
<label for="eml" class="col-sm-5 control-label">Email <small>(string, email onKeyup)</small></label>
<div class="col-sm-5">
<input type="text" id="eml" class="form-control"
ng-model="eml"
ng-init="emlRules = {type: 'string', email: 'Email is not valid.'}"
ngform-validator="{{emlRules}}"
ngform-validator-options="{validateOn: 'keyup'}">
<p class="help-block" ng-cloak>{{errMsg.eml}}</p>
</div>
</div>
<div ng-class="{'form-group': true, 'has-error': errMsg.passwd}">
<label for="passwd" class="col-sm-5 control-label">Password <small>(string, emptySpaces onKeyup)</small></label>
<div class="col-sm-3">
<input type="text" id="passwd" class="form-control"
ng-model="passwd"
ng-init="passwdRules = {type: 'string', emptySpaces: 'Empty spaces are not allowed in password field.'}"
ngform-validator="{{passwdRules}}"
ngform-validator-options="{validateOn: 'keyup'}">
<p class="help-block" ng-cloak>{{errMsg.passwd}}</p>
</div>
</div>
<div ng-class="{'form-group': true, 'has-error': errMsg.rpassswd}">
<label for="rpassswd" class="col-sm-5 control-label">Password repeat <small>(string, sameAs onChange)</small></label>
<div class="col-sm-3">
<input type="password" id="rpassswd" class="form-control"
ng-model="rpassswd"
ng-init="rpassswdRules = {type: 'string', sameAs: ['Not same as password.', 'passwd']}"
ngform-validator="{{rpassswdRules}}"
ngform-validator-options="{validateOn: 'change'}">
<p class="help-block" ng-cloak>{{errMsg.rpassswd}}</p>
</div>
</div>
<div ng-class="{'form-group': true, 'has-error': errMsg.regx}">
<label for="regx" class="col-sm-5 control-label">Capital letters only: <small>(string, regex onKeyup)</small></label>
<div class="col-sm-5">
<input type="text" id="regx" class="form-control"
ng-model="regx"
ngform-validator="{type: 'string', regex: ['Only capital letters are allowed.', '^[A-Z]+$']}"
ngform-validator-options="{validateOn: 'keyup'}">
<p class="help-block" ng-cloak>{{errMsg.regx}}</p>
</div>
</div>
<div ng-class="{'form-group': true, 'has-error': errMsg.enm}">
<label for="enm" class="col-sm-5 control-label">Salutation: <small>(string, enum onChange)</small></label>
<div class="col-sm-2">
<input type="text" id="enm" class="form-control" placeholder="Mr. , Mrs. , Ms."
ng-model="enm"
ngform-validator="{type: 'string', enum: ['Only Mr. Mrs. or Mrs. is allowed to enter.', ['Mr.', 'Mrs.', 'Ms.']]}"
ngform-validator-options="{validateOn: 'change'}">
<p class="help-block" ng-cloak>{{errMsg.enm}}</p>
</div>
</div>
<div ng-class="{'form-group': true, 'has-error': errMsg.web}">
<label for="web" class="col-sm-5 control-label">Website: <small>(string, url onChange)</small></label>
<div class="col-sm-4">
<input type="text" id="web" class="form-control" placeholder="example: https://ads.com/product/tech/?q=cars"
ng-model="web"
ngform-validator="{type: 'string', url: 'Website\'s URL is not correct.'}"
ngform-validator-options="{validateOn: 'change'}">
<p class="help-block" ng-cloak>{{errMsg.web}}</p>
</div>
</div>
<div ng-class="{'form-group': true, 'has-error': errMsg.cena}">
<label for="cena" class="col-sm-5 control-label">Price ($): <small>(number, price onChange)</small></label>
<div class="col-sm-2">
<input type="text" id="cena" class="form-control"
ng-model="cena"
ngform-validator="{type: 'number', price: ''}"
ngform-validator-options="{validateOn: 'change'}">
<p class="help-block" ng-cloak>{{errMsg.cena}}</p>
</div>
</div>
<div ng-class="{'form-group': true, 'has-error': errMsg.phone}">
<label for="phone" class="col-sm-5 control-label">Phone: <small>(string, tel onKeyup)</small></label>
<div class="col-sm-3">
<input type="text" id="phone" class="form-control"
ng-model="phone"
ngform-validator="{type: 'string', tel: 'Not valid phone format.'}"
ngform-validator-options="{validateOn: 'keyup'}">
<p class="help-block" ng-cloak>{{errMsg.phone}}</p>
</div>
</div>
<br><br>
<h4>CUSTOM VALIDATORS</h4>
<div ng-class="{'form-group': true, 'has-error': errMsg.cstm}">
<label for="cstm" class="col-sm-5 control-label">3+ chars <small>(string, custom onKeyup)</small></label>
<div class="col-sm-5">
<input type="text" id="cstm" class="form-control"
ng-model="cstm"
ngform-validator="{type: 'string'}"
ngform-validator-custom="function (input) {
var err = (input.length >= 3) ? '' : 'Insert 3+ characters!';
return err;
}"
ngform-validator-options="{validateOn: 'keyup'}">
<p class="help-block" ng-cloak>{{errMsg.cstm}}</p>
</div>
</div>
<div class="clearfix"> </div><br><br>
<div class="form-group">
<div class="col-sm-4 col-sm-push-3">
<button type="button" class="btn btn-primary" ng-click="mySubmit()" ng-disabled="errMsg.eml || errMsg.maxstr">Submit</button>
<button type="button" class="btn btn-warning" ngform-validator-reset>Reset errors</button>
</div>
</div>
</form>
<!-- <br>
<br>
<br>
<div class="ttip" style="border:1px solid red">Hover me
<span class="tooltiptext">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</div> -->
<div class="clearfix"> </div><br><br><br><br>
<h3>Ordinary HTML form</h3>
<form action="">
<label for="price">Price <small>(number, min:12.87 onKeyup)</small></label>
<input type="text" id="price"
ng-model="prc"
ngform-validator="{type: 'number', min: ['Minimal price is $12.87', 12.87]}"
ngform-validator-options="{validateOn: 'keyup'}">
<span style="color:Maroon;font-size:smaller" ng-cloak>{{errMsg.prc}}</span>
</form>
<p class="alert alert-success" style="margin-top:35px;">
<a href="index2.html">Preview</a> validation in multilevel scope objects.
</p>
</div>
<br>
<br>
<br>
<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<!-- JS compiled by browserify -->
<script src="./dist/js/ngFormValidator.js"></script>
</body>
</html>