セマンティック-UIの使用してフォーム

最近ライブラリUIは、jqueryのは、使用することができました。パーソナライズすることができ、それはかなり良い感じ。

現状

簡単に言えば、それは、現在のバージョン2.4で停止したUIの下に現状を説明し、波を議論するgithubの。大雑把に死んで、その後、いくつかの質問を残して、更新されていない長い時間に行きました。そして、何人かの人々は、反復ライブラリに基づいてされ続けリンクと同様に、

上記のステートメントに基づいて、直接ユーザーを使用するための個人的な勧告は、関数保存する前に開発し、新しいコンポーネントを追加し続けています。歴史のバグによって残さ同時に解決することができます

使用してフォームのデモを

フォームのフォームを使用し、一般的に次のいくつかを含み、
- 検証ルール
- あなたは何も私を持っていません
- 指定された間違った場所にジャンプ
- 値を取得します。
- 同じ意味のフォームタイプの多様性を必要とする（例：他の時間、入力、その後、ラジオボックスは、上記の検証できません）

今、一つ上の1のために処理

検証ルール

  $('.ui.form').form({
    on: 'blur',
    fields: {}
  })

エラーを表示するには、2つの方法があります。

現在のフォームの下で、我々は追加する必要があります
```
  <div class="ui error message"></div>
```
セットアップinline: true

どちらのバージョンの検証ルール

簡単な方法

  fields: {
    name     : 'empty',
    skills   : ['minCount[2]', 'empty'],
    terms    : 'checked'
  }

【より複雑]はカスタマイズすることができます

  fields: {
    name: {
      identifier: 'name',
      rules: [
        {
          type   : 'empty',
          prompt : 'Please enter your name'
        }
      ]
    },
    skills: {
      identifier: 'skills',
      rules: [
        {
          type   : 'minCount[2]',
          prompt : 'Please select at least two skills'
        }
      ]
    },
    terms: {
      identifier: 'terms',
      rules: [
        {
          type   : 'checked',
          prompt : 'You must agree to the terms and conditions'
        }
      ]
    }
  }

あなたは何[I]動的に検証ルールを追加していません

値か否かを判断することにより制御される直流

  $('#input').on('input', (e) => {
    const value = e.target.value
    if (value) {
      $('.ui.form').form('remove rule', 'language')
      /**
       * 有点版本还需要手动去清除样式
       * 有些可以使用 validate field 进行单独校验即可
       */
    } else {
      $('.ui.form').form('add rule', 'language', {
        rules: [
          {
            type: 'checked',
            prompt: '选择一门你喜欢的语言'
          }
        ]
      })
      $('.ui.form').form('validate field', 'language')
    }
  })

指定された間違った場所にジャンプ

エラーの場所に関する情報を取得するための主要図書館のスタイルの使用にscrollTopと0主な理由はされてhtmlセットアップheight: 100%
ので、他の方法を試してみる必要があります

でonFailureの処理

  setTimeout(function() {
    // 获取第一个错误位置
    var res = $('.field.error')[0].getBoundingClientRect()
    var top = document.scrollingElement.scrollTop + res.y
    // 此处有一个疑惑点 为何需要 -120 目前没有深入研究
    $(document.scrollingElement).scrollTop(top - 120)
  }, 16)

値が取得し
、一般的にを通じて提供され得ることができるすべての値が、ためにしばらくは、複数の選択を行う、最後の値が配列の論理的にされている複数の値の魚を持っているので、使用のニーズに注意を払いますonSuccessfieldsnamecheckbox

HTML
```
  <input type="checkbox" name="books[]" value="自传">
```
チェック
```
  books: {
    identifier: 'books[]',
    rules: [{
      type: 'checked',
      prompt: '选择喜欢的书籍'
    }]
  }
```
上記の採択に続きfields、それの値を取得することができ、あなたは何をフィルタリングする必要があるfalse状況することができます
同じ意味では、フォームのさまざまな種類を含み、

同様の你有我无アプローチは、しかし、取得価額の時点で、我々はそれが他の入力であるかどうか、フォーカスを持っている必要があり、ラジオボタンは上記の失敗、またはどのようにします。とにかく、二つの値は、バックグラウンドを渡すために時間だけで、取得することができ、あなたはそれを少し扱うことができます

取引の詳細

用type=radioとtype=checkboxエラーメッセージが表示されるかどうかを確認し、現在第二の方法として使用される、そうでなければ、デフォルトのメッセージが最初に選択する値をエラーメッセージが表示されるので、明らかに問題がある、唯一の第二は、カスタマイズすることができる使用エラーメッセージが表示されます

概要

コード
異なるバージョンが微妙な違い（特にチェックボックスに、チェックは、明確に選ばれた、または赤のとき、あなたはバージョンを交換する必要がある）を持つリンク

セマンティック-UIを使用してフォーム

セマンティック-UIの使用してフォーム

現状

使用してフォームのデモを

概要

おすすめ