angular-auto-validate
Version:
An automatic validation module for AngularJS which gets rid of excess html in favour of dynamic element modification to notify the user of validation errors
316 lines (280 loc) • 15.7 kB
HTML
<html ng-app="jcs-demo">
<head lang="en">
<meta charset="UTF-8">
<title>Angular Auto Validate Test Page</title>
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="row" ng-controller="demoCtrl">
<div class="col-sm-8 col-sm-offset-1">
<p>
<button type="button" class="btn btn-primary" ng-click="toggleBS3Icons();">Toggle Validation State Icons</button>
</p>
<form role="form" name="testFrm" novalidate="novalidate"
ng-submit="submit(testFrm);"
validate-non-visible-controls="false"
validate-on-form-submit="true"
disable-dynamic-validatio_n>
<button type="button" class="btn btn-primary" ng-click="setExternalError(testFrm);">Set External Error On Firstname</button>
<div class="form-group">
<label class="control-label">Name</label>
<input type="text" name="firstname" style="display: block;" class="form-control" placeholder="Enter Your Name"
ng-model="user.name" required="required" ng-required-err-type="nameRequired"/>
</div>
<div class="form-group">
<label class="control-label">Name</label>
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-envelope"></i>
</span>
<input type="email" name="email" class="form-control"
ng-model="user.email"
placeholder="Enter email address"
ng-required="true"/>
</div>
</div>
<div class="form-group">
<label class="control-label">Email address - <small>Element with a custom element modifier (see source code)</small></label>
<input type="email" class="form-control" placeholder="Enter email" ng-model="user.email" required="required" element-modifier="myCustomModifierKey"/>
</div>
<div class="form-group">
<label class="control-label">Password - <small>Element with validation happening on blur rather than change</small></label>
<input type="password" class="form-control" ng-model="user.password" placeholder="Password" required="required" ng-minlength="6" ng-model-options="{updateOn: 'blur'}"/>
</div>
<div class="form-group">
<label class="control-label">Robot Test: Please spell Angular. - <small>Custom validation</small></label>
<input type="text" class="form-control" placeholder="Enter The Word Angular" ng-model="user.iq" mustcontainword="angular"/>
</div>
<div class="form-group">
<label class="control-label">Regex Pattern Only Letters</label>
<input type="text" class="form-control" placeholder="Enter Only Letters..." ng-model="user.letters" ng-pattern="/[a-zA-Z]/"/>
</div>
<div class="form-group">
<label class="control-label">Is User Active?
<input type="checkbox" class="form-control" ng-model="user.isActive" /></label>
</div>
<div class="form-group">
<label class="control-label">Input with no validation</label>
<input type="text" class="form-control" placeholder="Enter The Word Angular" ng-model="user.noValidation" />
</div>
<div class="form-group">
<label class="control-label">Valid Styling disabled</label>
<input type="text" class="form-control" required ng-model="user.someProperty" disable-invalid-styling="true" />
</div>
<ng-form name="childForm">
<div class="form-group">
<label class="control-label">Nickname</label>
<input type="text" class="form-control" name="Nickname" placeholder="Enter Nickname" ng-model="user.Nickname" required="required" ng-minlength="4">
</div>
</ng-form>
<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
<button type="button" class="btn btn-default" ng-click="resetFormViaEvent()">Reset Via Event</button>
</form>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h1>Not Required</h1>
<form name="signupFrm" novalidate="novalidate" class="form-horizontal" ng-submit="signin()">
<div class="form-group">
<label for="inputName" class="col-sm-2 control-label">Username:</label>
<div class="col-sm-10">
<input id="inputName" class="form-control" name="username"
ng-model="model.username"
ng-model-options="{updateOn: 'blur'}"
ng-minlength="3"
ng-maxlength="10"
/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Password:</label>
<div class="col-sm-10">
<input class="form-control" name="password"
type="password"
ng-model="model.password"
ng-model-options="{updateOn: 'blur'}"
ng-minlength="3"
ng-maxlength="10"
required/>
</div>
</div>
<div class="row">
<div class="col-md-9">
<p class="input-group">
<input type="text" class="form-control" ng-model="startTime" required ng-minlength="2" disable-valid-styling="true"/>
<!--<ul style="display: none;">-->
<!--<li></li>-->
<!--</ul>-->
<span class="input-group-btn">
<button class="btn btn-default"><i class="glyphicon glyphicon-facetime-video"></i></button>
</span>
</p>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
<span>Result :</span>{{result}}
</div>
</div>
<script type="text/javascript" src="../bower_components/angular/angular.js"></script>
<!--<script type="text/javascript" src="../dist/jcs-auto-validate.min.js"></script>-->
<script type="text/javascript" src="../src/jcs-auto-validate.js"></script>
<script type="text/javascript" src="../src/providers/validator.js"></script>
<script type="text/javascript" src="../src/services/bootstrap3ElementModifier.js"></script>
<script type="text/javascript" src="../src/services/debounce.js"></script>
<script type="text/javascript" src="../src/services/defaultErrorMessageResolver.js"></script>
<script type="text/javascript" src="../src/services/foundation5ElementModifier.js"></script>
<script type="text/javascript" src="../src/services/validationManager.js"></script>
<script type="text/javascript" src="../src/config/ngSubmitDecorator.js"></script>
<script type="text/javascript" src="../src/config/ngModelDecorator.js"></script>
<script type="text/javascript" src="../src/directives/formReset.js"></script>
<script type="text/javascript" src="../src/directives/autoValidateFormOptions.js"></script>
<script type="text/javascript" src="../src/directives/registerCustomFormControl.js"></script>
<script type="text/javascript" src="../src/jcs-auto-validate-run.js"></script>
<script type="text/javascript">
(function (angular) {
var app = angular.module('jcs-demo', ['jcs-autoValidate']);
app.controller('demoCtrl', [
'$http',
'$scope',
'bootstrap3ElementModifier',
function ($http, $scope, bootstrap3ElementModifier) {
$scope.user = {};
$scope.bs3Icons = false;
$scope.toggleBS3Icons = function () {
$scope.bs3Icons = !$scope.bs3Icons;
bootstrap3ElementModifier.enableValidationStateIcons($scope.bs3Icons);
};
$scope.resetFormViaEvent = function() {
$scope.$broadcast('form:testFrm:reset');
};
$scope.submit = function (frmCtrl) {
//frmCtrl.autoValidateFormOptions.resetForm();
alert('submitted');
$http.post('https://api.app.com/users', $scope.user).then(function (response) {
if (response.data.validationErrors) {
angular.forEach(response.data.validationErrors, function (error) {
frmCtrl.setExternalValidation(error.key, error.messageKey, error.message);
})
}
});
};
$scope.setExternalError = function (frm) {
frm.setExternalValidation('firstname', undefined, 'hello joe');
};
$scope.toggleBS3Icons();
}
]);
app.directive('mustcontainword', [
function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
var validateFn = function (viewValue) {
if (ctrl.$isEmpty(viewValue) || viewValue.toLowerCase().indexOf(attrs.mustcontainword.toLowerCase()) === -1) {
ctrl.$setValidity('mustcontainword', false);
return undefined;
} else {
ctrl.$setValidity('mustcontainword', true);
return viewValue;
}
};
ctrl.$parsers.push(validateFn);
ctrl.$formatters.push(validateFn);
}
}
}]);
app.directive('uniqueIdChecker', [
'$http',
function($http) {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
var validateFn = function (viewValue) {
$http.get('https://myapp.com/validator-checks/unique-id/' + viewValue).then(function () {
ctrl.$setValidity('nonUniqueId', true);
}, function () {
ctrl.$setValidity('nonUniqueId', false);
});
return viewValue;
};
ctrl.$parsers.push(validateFn);
ctrl.$formatters.push(validateFn);
}
}
}]);
app.run([
'defaultErrorMessageResolver',
function (defaultErrorMessageResolver) {
defaultErrorMessageResolver.getErrorMessages().then(function (errorMessages) {
errorMessages['nonUniqueId'] = 'This id is already taken plus choose another';
});
}
]);
app.factory('myCustomElementModifier', [
function () {
var /**
* @ngdoc function
* @name myCustomElementModifier#makeValid
* @methodOf myCustomElementModifier
*
* @description
* Makes an element appear valid by apply custom styles and child elements.
*
* @param {Element} el - The input control element that is the target of the validation.
*/
makeValid = function (el) {
el.removeClass('bg-red');
el.addClass('bg-green');
},
/**
* @ngdoc function
* @name myCustomElementModifier#makeInvalid
* @methodOf myCustomElementModifier
*
* @description
* Makes an element appear invalid by apply custom styles and child elements.
*
* @param {Element} el - The input control element that is the target of the validation.
* @param {String} errorMsg - The validation error message to display to the user.
*/
makeInvalid = function (el, errorMsg) {
el.removeClass('bg-green');
el.addClass('bg-red');
};
return {
makeValid: makeValid,
makeInvalid: makeInvalid,
key: 'myCustomModifierKey'
};
}
]);
// now register the custom element modifier with the auto-validate module and set it as the default one for all elements
app.run([
'validator',
'myCustomElementModifier',
'defaultErrorMessageResolver',
function (validator, myCustomElementModifier, defaultErrorMessageResolver) {
validator.registerDomModifier(myCustomElementModifier.key, myCustomElementModifier);
defaultErrorMessageResolver.setI18nFileRootPath('../src/lang/');
defaultErrorMessageResolver.setCulture('en-gb');
defaultErrorMessageResolver.getErrorMessages().then(function (errorMessages) {
errorMessages['pattern'] = 'Custom Error Message {0}';
errorMessages['mustcontainword'] = 'Please enter the word "{0}"';
errorMessages['nameRequired'] = 'Please enter your name';
});
}
]);
}(angular));
</script>
</body>
</html>