postするデータをjson化してpostすればcollectionなどにも対応出来そう。

例えば以下のようなhtmlを

    <form>
      <input type="submit">
      <div>event
        <input name="name" placeholder="event name"/>
      </div>
      <div collection="participants">
        <div>user:
          <input name="name" placeholder="user name">
          <input age="age" placeholder="0" type="number">
        <button tabindex="-1" type="button" data-role="remove" data-target="participants">-</button>
        </div>
        <div>user:
          <input name="name" placeholder="user name">
          <input age="age" placeholder="0" type="number">
        <button tabindex="-1" type="button" data-role="remove" data-target="participants">-</button>
        </div>
      </div>
      <button type="button" data-role="add" data-target="participants">+</button>
    </form>

以下のようなjsonという風に考える。

{
  "name": "",
  "participants": [
    {"name": "", "age": ""},
    {"name": "", "age": ""}
  ]
}

もう少し詳しく

{"name": "foo"}

は

<input name="foo">

と見るとネストした構造をどうするかというと。このようなネスト構造は。

{
  "father": {"name": "", "age": ""},
  "mother": {"name": "", "age": ""}
}

以下のようなhtmlにする

<div scope="father">
  <input name="name">
  <input name="age">
</div>
<div scope="mother">
  <input name="name">
  <input name="age">
</div>

コレクションに関しては個数を増減したいので追加と削除のボタンを追加する。

{
  "event": {
    "name": "foo",
    "span": {
      "begin": {
        "year": "2000",
        "month": "1",
        "day": "1"
      },
      "end": {
        "year": "2000",
        "month": "1",
        "day": "3"
      }
    }
  },
  "performance": [
    {
      "name": "bar",
      "date": {
        "year": "2000",
        "month": "1",
        "day": "1",
        "hour": "10"
      }
    },
    {
      "name": "bar2",
      "date": {
        "year": "2000",
        "month": "1",
        "day": "2",
        "hour": "10"
      }
    }
  ]
}

は以下のようなhtml

<div scope="event">
  <input name="name" value="foo">
  <div scope="span">
    <div scope="begin">
      <input name="year" type="number" value="2000">
      <input name="month" type="number" value="1">
      <input name="day" type="number" value="1">
    </div>
    <div scope="end">
      <input name="year" type="number" value="2000">
      <input name="month" type="number" value="1">
      <input name="day" type="number" value="3">
    </div>
  </div>
  <button data-target="performance" data-role="add" type="button">+</button>
  <div collection="performance">
    <div>
      <input name="bar">
      <div scope="date">
        <input name="year" type="number" value="2000">
        <input name="month" type="number" value="1">
        <input name="day" type="number" value="1">
        <input name="hour" type="number" value="10">
        <button type="button" data-target="performance" data-role="remove">-</button>
      </div>
    </div>
    <div>
      <input name="bar2">
      <div scope="date">
        <input name="year" type="number" value="2000">
        <input name="month" type="number" value="1">
        <input name="day" type="number" value="2">
        <input name="hour" type="number" value="10">
        <button type="button" data-target="performance" data-role="remove">-</button>
      </div>
    </div>
  </div>
</div>

このようなjsへの変換をform submit時に行う。すると今までのjsonをparseするようなschema validationが普通に使えるようになる。demo

gist4ee07930ec610ed23c11