usky-oa
/
jnpf-web-datareport


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
							<!doctype 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/zeroclipboard/ZeroClipboard.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>