/* Styles go here */
/*style.css*/
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 700px;
height: 500px
}
.body {
padding: 15px;
}
.select2 > .select2-choice.ui-select-match {
/* Because of the inclusion of Bootstrap */
height: 29px;
}
.selectize-control > .selectize-dropdown {
top: 36px;
}
/^[a-zA-Z][a-zA-Z \d]*$/
- Please notice the starting and ending / -> all regular expressions must be enclosed between these two
- ^ tells the next pattern should start from beginning
-$ tells the pattern should be ending pattern
-[a-zA-Z] match with any lowercase or upper case alpthabet where as [0-9] or \d mean numeric digit
- * matches with zero or more occurence of preceding pattern
- So the pattern ^[a-zA-Z] match with value starting with upper/lower case alpthabet
- Followed by [a-zA-Z \d]* match with zero or more occurence of alphabet, number or space till end of input
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
* Link: <http://example.org/.meta>; rel=meta, <http://example.org/.acl>; rel=acl
* var r = parseLinkHeader(xhr.getResponseHeader('Link'));
* r['acl']['href'] outputs http://example.org/.acl
*/
// unquote string (utility)
function unquote(value) {
if (value.charAt(0) === '"' && value.charAt(value.length - 1) === '"')
return value.substring(1, value.length - 1);
return value;
}
// parse a Link header
function parseLinkHeader(header) {
var linkexp = /< [^>]*>\s*(\s*;\s*[^\(\)<>@,;:"\/\[\]\?={} \t]+=(([^\(\)<>@,;:"\/\[\]\?={} \t]+)|("[^"]*")))*(,|$)/g;
var paramexp = /[^\(\)<>@,;:"\/\[\]\?={} \t]+=(([^\(\)<>@,;:"\/\[\]\?={} \t]+)|("[^"]*"))/g;
var matches = header.match(linkexp);
var rels = new Object();
for (i = 0; i < matches.length; i++) {
var split = matches[i].split('>');
var href = split[0].substring(1);
var ps = split[1];
var link = new Object();
link.href = href;
var s = ps.match(paramexp);
for (j = 0; j < s.length; j++) {
var p = s[j];
var paramsplit = p.split('=');
var name = paramsplit[0];
link[name] = unquote(paramsplit[1]);
}
if (link.rel !== undefined) {
rels[link.rel] = link; }
}
return rels;
}
function parseLink(header){
var parts = header.split(',');
var rels = new Object();
for(i=0; i < parts.length; i++){
var split =parts[i].split(';');
var linkref = split[0].replace('<',' ');
linkref = linkref.replace('>',' ').trim();
var href = linkref;
var relref = split[1].split('=');
var rel = "";
if(relref[0].trim()==='rel')
rel =relref[1].trim();
rels[ rel] = href;
}
return rels;
}
var app = angular.module('myValidations', []);
app.directive("alphaNumeric", function(){
return {
require: "ngModel",
restrict: 'A',
link : function(scope, elm, attrs, ctrl){
var regex=/^[a-zA-Z][a-zA-Z \d]*$/ ;
ctrl.$parsers.unshift(function(viewValue){
if( regex.test(viewValue)){
ctrl.$setValidity('alphaNumeric',true);
return viewValue;
}
else{
ctrl.$setValidity('alphaNumeric',false);
elm.val(''); ///clear the entry
}
return "";
});
}
};
});
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html ng-app="myApp">
<head>
<title>Input validation using ng-pattern and building custom validation directive</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script data-require="angular.js@1.2.0-rc2" data-semver="1.2.0-rc2" src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
<script data-require="twitter-bootstrap@2.3.1" data-semver="2.3.1" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.js"></script>
<script src="myvalidations.js"></script>
</head>
<body ng-controller="mytestController">
<form name="myForm">
<div>
<input name="fld1" type="text" ng-model="somevar" ng-pattern="/^[a-zA-Z][a-zA-Z \d]*$/" required placeholder="enter alpha numeric text"
tabindex=1 ng-blur="visitedFld1 = true">
<span class="error" ng-show="myForm.fld1.$dirty && myForm.fld1.$error.required">This column can not be blank</span>
<span class="error" ng-show="myForm.fld1.$dirty && myForm.fld1.$invalid && visitedFld1"> Please enter a valid alpha numeric value</span><br>
<br>
</div>
<div><label>{{somevar}}</label></div>
<div>
<input name="fld2" type="text" ng-model="somevar1" ng-pattern="/^[A-Z][A-Z]-\d\d*$/" required placeholder="AA-dd" tabindex=3>
<span class="error" ng-show="myForm.fld2.$dirty && myForm.fld2.$error.required">This column can not be blank</span>
<span class="error" ng-show="myForm.fld2.$dirty && myForm.fld2.$invalid"> Please enter a valid alpha numeric value</span><br>
</div>
<div><label>{{somevar1}}</label></div>
<div>
<input name="fld3" type="text" ng-model="somevar2" alpha-numeric required placeholder="Alpha numeric" tabindex=2>
<span class="error" ng-show="myForm.fld3.$dirty && myForm.fld3.$error.required">This column can not be blank</span>
<span class="error" ng-show="myForm.fld3.$dirty && myForm.fld3.$invalid"> Please enter a valid alpha numeric value</span><br>
</div>
<div><label>{{somevar2}}</label></div>
</form>
<script>
var app = angular.module('myApp', ['myValidations']);
app.controller('mytestController', function($scope,$http) {
var somevar="";
var somevar1="";
var somevar2="";
});
</script>
</body>
</html>