form using semantic-ui

semantic-ui form using

Recently found a library ui, jquery can use. Can be personalized, it feels pretty good.

status quo

Briefly discusses the status quo under the ui it, stop at the current version 2.4, github to discuss a wave. Roughly the dead, then went on a long time not updated, leaving some questions. Then some people continue to be based on the iterative library Link , Like a

Based on the above statement, personal recommendation to use direct users then developed before the function preservation, and continues to add new components. At the same time left over by history bug can be resolved

form using demo

• Use form form, generally involves the following several
  • Validation Rules
  • You have no I
  • Jump to the wrong location specified
  • Get the value
  • The same meaning involves a variety of form type (eg: other time, input, then radio box above would not be verified)

Now processed for the above one by one

• Validation Rules

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

  There are two ways to display error

  • Under the current form, we need to add

      <div class="ui error message"></div>

  • Set upinline: true

  • Both versions validation rules

    • Simple method

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

    • [More complex] can be customized

        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'
              }
            ]
          }
        }  

• You have no [I] dynamically add validation rules

  Direct current to be controlled by judging whether the value

    $('#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')
      }
    })

• Jump to the wrong location specified

  Due to the use of the library's style, leading to obtain information on the location of the error scrollTopas 0the main reason is htmlset up height: 100%
  so need to try other ways

  In the onFailureprocessing of

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

• Gets the value
  generally are available through in onSuccessthe fieldscan get all namethe value, but for a checkboxwhile making multiple selections, has got is the last value is an array Logically, multiple values fishes, so pay attention to the needs of Use

  html

    <input type="checkbox" name="books[]" value="自传">

  check

    books: {
      identifier: 'books[]',
      rules: [{
        type: 'checked',
        prompt: '选择喜欢的书籍'
      }]
    }

  Following the adoption of the above fieldscan get the value of it, just you need to filter what falsecircumstances can

• The same meaning involves a variety of form types

  A similar 你有我无approach, but at the time of acquisition value, we need to have a focus, whether it is the other input, radio buttons above will fail, or how. Anyway, the two values can get, just in time to pass the background, you can handle it a little

Details of the deal

For type=radioand type=checkboxcheck if the error message to be displayed, currently used as a second way, otherwise the default message will select the first value as an error message is displayed, so obviously there is a problem, only use the second can be customized error message is displayed

to sum up

• code
• Different versions have subtle differences (in particular checkbox, when the check, clearly chosen, or red, you need to replace the version) Link