フォームでのテキスト入力の際に,一定の文字数以上は書いてもらいたいという場合があります。例えば,過去の出来事を思い出してもらい,その内容を書いてもらうという自伝的記憶想起課題などでは必要となるかもしれません。lab.jsでの実装は以下のように行います。lab.jsで用意されているフォームでは実装できなかったので,コードでフォームを作っています。

まず,lab.js BuilderでHTML Screenコンポーネントを追加してください。このコンポーネントはあまり使わないものだと思いますので,以下の画像を参考にしてください。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/99597f68-e10e-4fe1-8659-30540aa8b818/_2020-08-18_16.54.39.png

次に以下のコードをコピーして,Contentに貼り付けてください。これで完成です。

<main class ="content-horizontal-center content-vertical-center">
  <div class ="w-m">
    <div class="page-item page-item-text text-left">
      <h3>あなたの人生で最も楽しかったエピソードを1つ思い出してください。</h3>
      <p>そして,思い出したエピソードの内容を以下の記入欄に100字以上,記入してください。</p>
      </div>
    <form id="page-form" style="display: block;" autocomplete="off">
    <textarea name="AMT" required="" class="w-m" rows="10" minlength="100"></textarea>
    </form>
    <div>
      <button type="submit" form="page-form">次へ</button>
    </div>
  </div>
</main>

textareaではminlengthというパラメータによって最低文字数を設定することができるので,ここでは100字に設定してます。minlength="100"という部分です。この数字を変更することで最低文字数を任意の文字数に設定することができます。教示にあたる部分は適宜書き替えてご利用ください。

デモ

Experiment

コード

minLengthDemo.json

©2020 Masanori Kobayashi