demo/core/simple.html
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body ng-app="demoApp">
<div ng-controller="TestController">
<h1>Simple Demo</h1>
<form name="demoForm" novalidate valdr-enabled="isValdrEnabled">
<div valdr-type="Person">
<h4>Person</h4>
<div valdr-form-group valdr-enabled="true">
<label for="lastName">Last Name</label>
<input type="text"
id="lastName"
name="lastName"
ng-model="person.lastName">
<span>$valid {{ demoForm.lastName.$valid }}</span>
</div>
<div valdr-form-group>
<label for="firstName">First Name</label>
<input type="text"
id="firstName"
name="firstName"
ng-model="person.firstName">
<span>$valid {{ demoForm.firstName.$valid }}</span>
</div>
<div valdr-form-group>
<label for="age">Age</label>
<input type="number"
id="age"
name="age"
ng-model="person.age">
<span>$valid {{ demoForm.age.$valid }}</span>
</div>
<div valdr-form-group>
<label for="gender">Gender</label>
<select id="gender"
name="gender"
ng-options="gender as gender.label for gender in genders"
ng-model="person.gender">
<option value=""></option>
</select>
<span>$valid {{ demoForm.gender.$valid }}</span>
</div>
<div valdr-form-group>
<label for="bio">Bio</label>
<textarea
id="bio"
name="bio"
ng-model="person.bio"
rows="3"></textarea>
<span>$valid {{ demoForm.bio.$valid }}</span>
</div>
<div valdr-form-group>
<label for="homepage">Homepage</label>
<input type="text"
id="homepage"
name="homepage"
ng-model="person.homepage">
<span>$valid {{ demoForm.homepage.$valid }}</span>
</div>
<h4>Address</h4>
<div valdr-type="Address">
<div valdr-form-group>
<label for="zipCode">Zip Code</label>
<input type="text"
id="zipCode"
name="zipCode"
ng-model="person.address.zipCode">
<span>$valid {{ demoForm.zipCode.$valid }}</span>
</div>
<div valdr-form-group>
<label for="email">E-Mail</label>
<input type="text"
id="email"
name="email"
ng-model="person.address.email">
<span>$valid {{ demoForm.email.$valid }}</span>
</div>
</div>
</div>
</form>
<h3>Settings</h3>
<button ng-click="addAddressConstraints()">Add address constraints</button>
<div>
<label for="enabled">Enable/Disable valdr (except last name)</label>
<input id="enabled" type="checkbox" ng-model="isValdrEnabled">
</div>
<button ng-click="removeConstraints()">Remove all constraints</button>
<pre>demoForm.$valid: {{ demoForm.$valid }}</pre>
<h3>demoForm</h3>
<pre>{{ demoForm | json }}</pre>
<h3>constraints</h3>
<pre>{{ constraints | json }}</pre>
</div>
<script src="/bower_components/angular/angular.js"></script>
<script src="../js/valdr.js"></script>
<script src="http://localhost:35729/livereload.js"></script>
<script>
var demoApp = angular.module('demoApp', ['valdr']);
demoApp.config(function(valdrProvider) {
valdrProvider.addConstraints({
'Person': {
'lastName': {
'size': {
'min': 2,
'max': 10,
'message': 'Last name must be between 2 and 10 characters.'
},
'required': {
'message': 'Last name is required.'
}
},
'firstName': {
'size': {
'min': 2,
'max': 20,
'message': 'First name must be between 2 and 20 characters.'
}
},
'age': {
'min': {
value: '21',
message: 'Must be 21 years old.'
},
'required': {
message: 'Age is required.'
}
},
'gender': {
'required': {
message: 'Gender is required.'
}
},
'bio': {
'size': {
max: 20,
message: 'Bio can not be longer than 20 characters.'
}
},
'homepage': {
'url': {
message: 'Must be a valid URL.'
}
}
}
});
});
demoApp.controller('TestController', function ($scope, valdr) {
$scope.person = {};
$scope.genders = [
{ label: 'Male', value: 1 },
{ label: 'Female', value: 2 }
];
$scope.constraints = valdr.getConstraints();
$scope.isValdrEnabled = true;
$scope.removeConstraints = function () {
valdr.removeConstraints('Person');
};
$scope.addAddressConstraints = function () {
valdr.addConstraints({
'Address': {
'email': {
'email': {
'message': 'Must be a valid E-Mail address.'
}
},
'zipCode': {
'pattern': {
'value': /^\d{4}$/,
'message': 'Zip code must be 4 digits.'
}
}
}
});
$scope.constraints = valdr.getConstraints();
};
});
</script>
</body>
</html>