demo.html

<script lang='text/javascript' src='json_sans_eval.js'></script>
<script lang='text/javascript' src='rx.js'></script>
<script lang='text/javascript' src='rx/coretypes.js'></script>

<h2 id='demo'>Demonstration</h2>
<p>
  In this demo, you can define a schema (in JSON) and provide input data (in
  JSON) and find out whether your schema is valid and whether the input data
  validates against the schema.  You can also enter input strings that wouldn't
  normally be a valid JSON value, like numbers, strings, and bools.
</p>

<p id='status' class='neutral'>(status indicator)</p>
<table id='demoInputs'>
  <tr>
    <td>
      <h3>Schema (in JSON)</h3>
<textarea id='jsonSchema' rows='14' cols='35'>

{
 "type": "//rec",
 "required": { "foo": "//int" },
 "optional": {
   "bar": {
     "type": "//arr",
     "contents": "//num",
     "length": { "min": 1, "max": 6 }
   }
 },
}
</textarea>
    </td>
    <td>
      <h3>Input Data (in JSON)</h3>
      <textarea id='jsonInput' rows='14' cols='35'>

{
  "foo": 8675309,
  "bar": [ 1, 2.002, 3 ]
}
</textarea>
    </td>
  </tr>
</table>

<script lang='text/javascript'>
//console.log('Initializing demo...');
$(function() {
  var rx = new Rx({});
  for (coreType in Rx.CoreType) {
    //console.log("registering type", coreType);
    rx.registerType( Rx.CoreType[coreType] );
  }

  $('textarea').each(function () {
    this._old_content = $(this).val();
  });

  $('textarea').keypress(function () {
    var content = $(this).val();
    if (content == this._old_content) return;

    this._old_content = content;
    $('#status').text('(status indicator)').attr('class', '');
  });

  $('#checkData').click(function () {
    var status = $('#status');
    status.text('(status indicator)').attr('class', '');

    $('textarea').each(function () {
      this._old_content = $(this).val();
    });

    var jsonSchema;
    try {
      jsonSchema = (jsonParse( "[" + $('#jsonSchema').val() + "]" ))[0];
      if (jsonSchema.constructor == String) jsonSchema = { type: jsonSchema };
    } catch (e) {
      status.text('failed to parse schema').attr('class', 'error');
      return;
    }

    //console.log('schema obj: ', jsonSchema);

    var schema;
    try {
      schema = rx.makeSchema(jsonSchema);
    } catch (e) {
      status.text('invalid schema definition').attr('class', 'error');
      return;
    }

    //console.log('schema: ', schema);

    var jsonInput;
    try {
      var wrappedJson = "[" + $('#jsonInput').val() + "]";
      jsonInput = (jsonParse( wrappedJson ))[0];
    } catch (e) {
      status.text('failed to parse input block').attr('class', 'error');
      return;
    }

    var result;
    try {
      result = schema.check(jsonInput);
    } catch (e) {
      status.text('exception raised during check').attr('class', 'error');
      return;
    }

    if (result) {
      status.text('schema accepts the input').attr('class', 'accept');
    } else {
      status.text('schema rejects the input').attr('class', 'reject');
    }
  });
});
</script>

<button id='checkData'>Check Data</button>