Advanced and dynamic input validation with AngularJS

Developer
Vincenzo
Size
3,343 Kb
Views
28,336
  1. Advanced and dynamic input validation with AngularJS Previews
  2. Advanced and dynamic input validation with AngularJS HTML Codes
  3. Advanced and dynamic input validation with AngularJS CSS Codes
  4. Advanced and dynamic input validation with AngularJS JS Codes

How do I make an advanced and dynamic input validation with angularjs?

What is a advanced and dynamic input validation with angularjs? How do you make a advanced and dynamic input validation with angularjs? This script and codes were developed by Vincenzo on 07 October 2022, Friday.

Advanced and dynamic input validation with AngularJS Previews
IQ Test

Advanced and dynamic input validation with AngularJS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Advanced and dynamic input validation with AngularJS</title> <link rel='stylesheet prefetch' href='https://gitcdn.xyz/repo/angular/bower-material/v0.10.1/angular-material.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { display: inline-table; width: 100%; height: 100%;
}
body > div { display: table-cell; vertical-align: middle; text-align: center;
}
body > div > form { width: 44rem; margin: 0 auto; text-align: left;
}
pre { text-align: left; background: #f2f2f2; padding: 1.2rem; border: 1px solid #aaa; border-radius: .3rem;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div ng-app="TestApp" ng-controller="AppController">	<form name="formTest" flex layout="row">	<md-select ng-model="inputType"> <md-option ng-repeat="input in inputTypes" value="{{input}}">{{input}}</md-option> </md-select>	<md-input-container>	<label>{{inputType}} input</label>	<input type="{{inputType}}" ng-model="value" name="test" required dynamic-input-validator="inputType"/>	<div ng-messages="formTest.test.$error">	<!--<div ng-message="parsing">Invalid date</div>-->	<div ng-message="required">Value is required</div>	<div ng-message="mail">Value is not a valid mail</div>	<div ng-message="number">Value is not a valid number</div>	<div ng-message="tel">Value is not a valid telephone</div>	</div>	</md-input-container>	</form>	<pre>Raw model value: {{value || 'null'}}</pre>	<pre>Error: <span ng-repeat="(k,v) in formTest.$error">{{k}}, </span></pre>	<!--<pre>Error: {{formTest.$error|json}}</pre>-->
</div> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js'></script>
<script src='https://gitcdn.xyz/repo/angular/bower-material/v0.10.1/angular-material.js'></script> <script src="js/index.js"></script>
</body>
</html>

Advanced and dynamic input validation with AngularJS - Script Codes CSS Codes

body { display: inline-table; width: 100%; height: 100%;
}
body > div { display: table-cell; vertical-align: middle; text-align: center;
}
body > div > form { width: 44rem; margin: 0 auto; text-align: left;
}
pre { text-align: left; background: #f2f2f2; padding: 1.2rem; border: 1px solid #aaa; border-radius: .3rem;
}

Advanced and dynamic input validation with AngularJS - Script Codes JS Codes

var testApp = angular.module('TestApp', ['ngMaterial', 'ngMessages']).directive('dynamicInputValidator', function () { return { restrict: 'A', require: 'ngModel', scope: { ngModel: '=',	dynamicInputValidator: '=' }, link: function (scope, elm, attrs, ctrl) {	scope.$watch("dynamicInputValidator", function() {	ctrl.$validate();	}); /*ctrl.$formatters.push(function (value) { return value; });*/ /*ctrl.$parsers.push(function (newValue) { return newValue; });*/	var mailRe = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/ ;	var numberRe = /^[+-]?(?=.)(?:\d+,)*\d*(?:\.\d+)?$/;	var telRe = /^\+?[ .-\d]+(-\d+)*(\d)$/; ctrl.$validators.mail = function (modelValue, viewValue) { return scope.dynamicInputValidator=="email" ? mailRe.test(viewValue) : true; };	ctrl.$validators.number = function (modelValue, viewValue) { return scope.dynamicInputValidator=="number" ? numberRe.test(viewValue) : true; };	ctrl.$validators.tel = function (modelValue, viewValue) { return scope.dynamicInputValidator=="tel" ? telRe.test(viewValue) : true; }; } } });
testApp.controller('AppController', ['$scope', function ($scope) {	$scope.inputTypes = ['text', 'email', 'number', 'tel'];	$scope.inputType = $scope.inputTypes[0];	$scope.value = "";
}]);
Advanced and dynamic input validation with AngularJS - Script Codes
Advanced and dynamic input validation with AngularJS - Script Codes
Home Page Home
Developer Vincenzo
Username vncnz
Uploaded October 07, 2022
Rating 3
Size 3,343 Kb
Views 28,336
Do you need developer help for Advanced and dynamic input validation with AngularJS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Vincenzo (vncnz) Script Codes
Name
Search text highlight example with material.angular
Tintometer
Pure CSS cut corner box test
Swiping Cards
Private Test
Simple Date input with VueJS 2
Simple tags input with VueJS
Elegant layout with elastic menu animation
AngularJS DateTimePicker concept
Square box with hover effect
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!