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
219 lines (195 loc) • 9.67 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">
<form role="form" name="testFrm" novalidate="novalidate"
ng-submit="submit(testFrm);">
<div class="form-group">
<label class="control-label">Name</label>
<input type="text" name="name" class="form-control"
ng-model="user.name"
placeholder="Enter firstname"
ng-required="true"/>
</div>
<div class="form-group">
<label>
Are you alive?
<input type="checkbox" ng-model="model.isActive" required/>
</label>
</div>
<div class="form-group">
<label>
<input type="checkbox" ng-model="model.termsAccepted" required/>
I accept the terms...
</label>
</div>
<div class="form-group">
<label>Favourite Colour</label>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="Red" ng-model="model.colour"
required>
Red
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="Green"
ng-model="model.colour" required>
Green
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="Blue"
ng-model="model.colour" required>
Blue
</label>
</div>
</div>
<div class="form-group">
<label>Hair Colour</label>
<div class="radio">
<label>
<input type="radio" name="hairColourRadios" id="optionsRadios4" value="Blonde"
ng-model="model.hairColour" required>
Blonde
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="hairColourRadios" id="optionsRadios5" value="Red"
ng-model="model.hairColour" required>
Red
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="hairColourRadios" id="optionsRadios6" value="Brown"
ng-model="model.hairColour" required>
Brown
</label>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</form>
</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.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>