@quantlab/handsontable
Version:
Spreadsheet-like data grid editor that provides copy/paste functionality compatible with Excel/Google Docs
190 lines (162 loc) • 8.24 kB
HTML
<html>
<head>
<meta charset='utf-8'>
<title>Validation - Handsontable</title>
<!--
Loading Handsontable (full distribution that includes all dependencies)
-->
<link data-jsfiddle="common" rel="stylesheet" media="screen" href="../dist/handsontable.css">
<link data-jsfiddle="common" rel="stylesheet" media="screen" href="../dist/pikaday/pikaday.css">
<script data-jsfiddle="common" src="../dist/pikaday/pikaday.js"></script>
<script data-jsfiddle="common" src="../dist/moment/moment.js"></script>
<script data-jsfiddle="common" src="../dist/numbro/numbro.js"></script>
<script data-jsfiddle="common" src="../dist/numbro/languages.js"></script>
<script data-jsfiddle="common" src="../dist/handsontable.js"></script>
<!--
Loading demo dependencies. They are used here only to enhance the examples on this page
-->
<link data-jsfiddle="common" rel="stylesheet" media="screen" href="css/samples.css?20140331">
<script src="js/samples.js"></script>
<script src="js/highlight/highlight.pack.js"></script>
<link rel="stylesheet" media="screen" href="js/highlight/styles/github.css">
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
<!--
Facebook open graph. Don't copy this to your project :)
-->
<meta property="og:title" content="Validation">
<meta property="og:description"
content="Use the validator method to easily validate synchronous or asynchronous changes to a cell.">
<meta property="og:url" content="http://handsontable.com/demo/validation.html">
<meta property="og:image" content="http://handsontable.com/demo/image/og-image.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="409">
<meta property="og:image:height" content="164">
<link rel="canonical" href="http://handsontable.com/demo/validation.html">
<!--
Google Analytics for GitHub Page. Don't copy this to your project :)
-->
<script src="js/ga.js"></script>
</head>
<body>
<div class="wrapper">
<div class="wrapper-row">
<div id="global-menu-clone">
<h1><a href="../index.html">Handsontable</a></h1>
</div>
<div id="container">
<div class="columnLayout">
<div class="rowLayout">
<div class="descLayout">
<div class="pad" data-jsfiddle="example1">
<h2>Validation</h2>
<p>Use the <b>validator</b> (see <a
href="https://github.com/handsontable/handsontable/wiki/Options">Options wiki page</a>) method to easily
validate synchronous or asynchronous changes to a cell. If you
need more control, <b>beforeValidate</b> and <b>afterValidate</b> plugin hooks are available (see <a
href="https://github.com/handsontable/handsontable/wiki/Events">Events wiki page</a>).
</p>
<p>In the below example, <code>email_validator_fn</code> is an async validator that resolves after 1000 ms.
</p>
<p>Use the <b>allowInvalid</b> option (see <a
href="https://github.com/handsontable/handsontable/wiki/Options">Options wiki page</a>) to define if the
grid should accept input that does not validate.</p>
<p>
If you need to modify the input (e.g. censor bad words, uppercase first letter), use the plugin hook <b>beforeChange</b>
(see <a
href="https://github.com/handsontable/handsontable/wiki/Events">Events wiki page</a>).
</p>
<div id="example1"></div>
<p>Callback console: <span class="code">[[row, col, oldValue, newValue], ...]</span></p>
<pre id="example1console" class="console">Edit the above grid to see callback</pre>
<p>
<button name="dump" data-dump="#example1" data-instance="hot"
title="Prints current data source to Firebug/Chrome Dev Tools">
Dump data to console
</button>
</p>
</div>
</div>
<div class="codeLayout">
<div class="pad">
<div class="jsFiddle">
<button class="jsFiddleLink" data-runfiddle="example1">Edit in jsFiddle</button>
</div>
<script data-jsfiddle="example1">
var people = [
{id: 1, name: {first: 'Joe', last: 'Fabiano'}, ip: '0.0.0.1', email: 'Joe.Fabiano@ex.com'},
{id: 2, name: {first: 'Fred', last: 'Wecler'}, ip: '0.0.0.1', email: 'Fred.Wecler@ex.com'},
{id: 3, name: {first: 'Steve', last: 'Wilson'}, ip: '0.0.0.1', email: 'Steve.Wilson@ex.com'},
{id: 4, name: {first: 'Maria', last: 'Fernandez'}, ip: '0.0.0.1', email: 'M.Fernandez@ex.com'},
{id: 5, name: {first: 'Pierre', last: 'Barbault'}, ip: '0.0.0.1', email: 'Pierre.Barbault@ex.com'},
{id: 6, name: {first: 'Nancy', last: 'Moore'}, ip: '0.0.0.1', email: 'Nancy.Moore@ex.com'},
{id: 7, name: {first: 'Barbara', last: 'MacDonald'}, ip: '0.0.0.1', email: 'B.MacDonald@ex.com'},
{id: 8, name: {first: 'Wilma', last: 'Williams'}, ip: '0.0.0.1', email: 'Wilma.Williams@ex.com'},
{id: 9, name: {first: 'Sasha', last: 'Silver'}, ip: '0.0.0.1', email: 'Sasha.Silver@ex.com'},
{id: 10, name: {first: 'Don', last: 'Pérignon'}, ip: '0.0.0.1', email: 'Don.Pérignon@ex.com'},
{id: 11, name: {first: 'Aaron', last: 'Kinley'}, ip: '0.0.0.1', email: 'Aaron.Kinley@ex.com'}
],
example1 = document.getElementById('example1'),
example1console = document.getElementById('example1console'),
settings1,
ipValidatorRegexp,
emailValidator;
ipValidatorRegexp = /^(?:\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b|null)$/;
emailValidator = function (value, callback) {
setTimeout(function(){
if (/.+@.+/.test(value)) {
callback(true);
}
else {
callback(false);
}
}, 1000);
};
settings1 = {
data: people,
minSpareRows: 1,
contextMenu: true,
beforeChange: function (changes, source) {
for (var i = changes.length - 1; i >= 0; i--) {
// gently don't accept the word "foo" (remove the change at index i)
if (changes[i][3] === 'foo') {
changes.splice(i, 1);
}
// if any of pasted cells contains the word "nuke", reject the whole paste
else if (changes[i][3] === 'nuke') {
return false;
}
// capitalise first letter in column 1 and 2
else if ((changes[i][1] === 'name.first' || changes[i][1] === 'name.last') && changes[i][3].charAt(0)) {
changes[i][3] = changes[i][3].charAt(0).toUpperCase() + changes[i][3].slice(1);
}
}
},
afterChange: function (changes, source) {
if (source !== 'loadData') {
example1console.innerText = JSON.stringify(changes);
}
},
colHeaders: ['ID', 'First name', 'Last name', 'IP', 'E-mail'],
columns: [
{data: 'id', type: 'numeric'},
{data: 'name.first'},
{data: 'name.last'},
{data: 'ip', validator: ipValidatorRegexp, allowInvalid: true},
{data: 'email', validator: emailValidator, allowInvalid: false}
]
};
var hot = new Handsontable(example1, settings1);
</script>
</div>
</div>
</div>
<div class="footer-text">
</div>
</div>
</div>
</div>
</div>
<div id="outside-links-wrapper"></div>
</body>
</html>