semantic-ui - 语义表单验证 - 验证任一字段为非空

Question

我有一个表单，其中有 2 个字段:ssn 和电话。我希望用户输入该领域的任何人。我正在使用语义验证，这是我的代码，您能让我知道如何使用语义验证表单吗？

<form class="ui error form basic segment" role="form" method="POST" action="{{ url('/username/email') }}">
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <input type="hidden" name="_method" value="patch">
    <div class="ui info message">
        Please enter either SSN or phone to email you the username.
    </div>

    <div class="field">
        <label for="ssn">SSN</label>
        <div class="ui icon input">
            <input type="text" class="form-control" name="ssn" value="{{ old('ssn') }}">  
        </div>
    </div>
    <div class="field">
        <label for="phone">Phone</label>
        <div class="ui icon input">
            <input type="text" class="form-control" name="phone" value="{{ old('phone') }}">  
        </div>
    </div>

    <input type="submit" value="Email Username" class="ui primary button"> 

</form>
<script type="text/javascript">
      $('.ui.form')
      .form({
        inline : true,
        on: 'blur',
        fields: {
          username: {
            identifier : 'ssn',
            rules: [
              {
                type   : 'empty',
                prompt : 'Please enter a SSN'
              }
            ]
          },
        }
      })
    ;
</script>

`

Answer 1

下面是一个更优雅的解决方案 Semantic UI字段识别标准。
字段不仅可以通过 Oniisaki 中提供的 input[name="…"] CSS 选择器来识别的接受答案，但也可以通过 DOM 元素 id 或 data-validation 属性:

/**
 * Checks whether current field value or at least one of additionally 
 *   given fields values is not empty, neither blank string.
 * @param {string} value Current field value.
 * @param {string} fieldIdentifiers Comma separated field identifiers.
 * @return {boolean}
 */
$.fn.form.settings.rules.allEmpty = function(value, fieldIdentifiers) {
  var $form = $(this);

  return !!value || fieldIdentifiers.split(',').some(function(fieldIdentifier) {
    return $form.find('#' + fieldIdentifier).val() ||
        $form.find('[name="' + fieldIdentifier +'"]').val() ||
        $form.find('[data-validate="'+ fieldIdentifier +'"]').val();

  });
};


// Using newly created custom validation rule.
// Notice how multiple fields are defined, if required.
$('.ui.form').form({
  ssn: {
    identifier: 'ssn',
    rules: [{

      // Multiple field identifiers could be defined, 
      // like `allEmpty[phone,email,skype]`.
      type: 'allEmpty[phone]',
      prompt: 'SSN or Phone (at least one field) must be filled.'
    }]
  }
});