jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
175 lines (171 loc) • 9.84 kB
HTML
<html ng-app="demoApp">
<head>
<title id="Description">jqxValidator directive for AngularJS</title>
<link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
<script type="text/javascript" src="../../scripts/angular.min.js"></script>
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxpasswordinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxvalidator.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmaskedinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
<script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="../../scripts/demos.js"></script>
<script type="text/javascript">
var demoApp = angular.module("demoApp", ["jqwidgets"]).factory('$exceptionHandler', function () {
return function (exception, cause) {
exception.message += ' (caused by "' + cause + '")';
throw exception;
}
});
demoApp.controller("demoController", function ($scope) {
$scope.validatorSettings = {
hintType: 'label',
animationDuration: 0,
rules: [
{ input: '#userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
{ input: '#userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12' },
{ input: '#realNameInput', message: 'Real Name is required!', action: 'keyup, blur', rule: 'required' },
{ input: '#realNameInput', message: 'Your real name must contain only letters!', action: 'keyup', rule: 'notNumber' },
{ input: '#realNameInput', message: 'Your real name must be between 3 and 12 characters!', action: 'keyup', rule: 'length=3,12' },
{
input: '#birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2014.', action: 'valueChanged', rule: function (input, commit) {
var date = $('#birthInput').jqxDateTimeInput('value');
var result = date.getFullYear() >= 1900 && date.getFullYear() <= 2014;
// call commit with false, when you are doing server validation and you want to display a validation error on this field.
return result;
}
},
{ input: '#passwordInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
{ input: '#passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup, blur', rule: 'length=4,12' },
{ input: '#passwordConfirmInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
{
input: '#passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus', rule: function (input, commit) {
// call commit with false, when you are doing server validation and you want to display a validation error on this field.
if (input.val() === $('#passwordInput').val()) {
return true;
}
return false;
}
},
{ input: '#emailInput', message: 'E-mail is required!', action: 'keyup, blur', rule: 'required' },
{ input: '#emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' },
{ input: '#ssnInput', message: 'Invalid SSN!', action: 'valueChanged, blur', rule: 'ssn' },
{ input: '#phoneInput', message: 'Invalid phone number!', action: 'valueChanged, blur', rule: 'phone' },
{ input: '#zipInput', message: 'Invalid zip code!', action: 'valueChanged, blur', rule: 'zipCode' },
{ input: '#acceptInput', message: 'You have to accept the terms', action: 'change', rule: 'required', position: 'right:0,0' }]
}
// validate
$scope.validate = function () {
$scope.validatorSettings.apply('validate');
}
});
</script>
<style type="text/css">
.register-table {
margin-top: 10px;
margin-bottom: 10px;
}
.register-table td,
.register-table tr {
margin: 0px;
padding: 2px;
border-spacing: 0px;
border-collapse: collapse;
font-family: Verdana;
font-size: 12px;
}
h3 {
display: inline-block;
margin: 0px;
}
</style>
</head>
<body>
<div ng-controller="demoController">
<div>
<h3>Register</h3>
</div>
<div style="overflow: hidden;">
<form jqx-validator jqx-settings="validatorSettings" id="testForm">
<table class="register-table">
<tr>
<td valign="top">Username:</td>
<td valign="top">
<jqx-input jqx-width="200" jqx-height="25" id="userInput"></jqx-input>
</td>
</tr>
<tr>
<td valign="top">Password:</td>
<td valign="top">
<jqx-password-input jqx-width="200" jqx-height="25" type="password" id="passwordInput"></jqx-password-input>
</td>
</tr>
<tr>
<td valign="top">Confirm password:</td>
<td valign="top">
<jqx-password-input jqx-width="200" jqx-height="25" type="password" id="passwordConfirmInput"></jqx-password-input>
</td>
</tr>
<tr>
<td valign="top">Real name:</td>
<td valign="top">
<jqx-input jqx-width="200" jqx-height="25" id="realNameInput"></jqx-input>
</td>
</tr>
<tr>
<td valign="top">Birth date:</td>
<td valign="top">
<jqx-date-time-input jqx-width="200" jqx-height="25" id="birthInput"></jqx-date-time-input>
</td>
</tr>
<tr>
<td valign="top">E-mail:</td>
<td valign="top">
<jqx-input jqx-width="200" jqx-height="25" id="emailInput" placeholder="someone@mail.com"></jqx-input>
</td>
</tr>
<tr>
<td valign="top">SSN:</td>
<td valign="top">
<jqx-masked-input jqx-width="200" jqx-height="25" jqx-mask="'###-##-####'" id="ssnInput"></jqx-masked-input>
</td>
</tr>
<tr>
<td valign="top">Phone:</td>
<td valign="top">
<jqx-masked-input jqx-width="200" jqx-height="25" jqx-mask="'(###)###-####'" id="phoneInput"></jqx-masked-input>
</td>
</tr>
<tr>
<td valign="top">Zip code:</td>
<td valign="top">
<jqx-masked-input jqx-width="200" jqx-height="25" jqx-mask="'###-##-####'" id="zipInput"></jqx-masked-input>
</td>
</tr>
<tr>
<td valign="top" colspan="2" style="padding: 5px;">
<jqx-check-box id="acceptInput" style="margin-left: 100px;">I accept terms</jqx-check-box>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<jqx-button ng-click="validate()">Send</jqx-button>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>