semantic form validation - Validation for either one of the fields as non-empty

Question

I have a form in which I have 2 fields, ssn and phone. I would like the user to enter anyone of the field. I'm using semantic validation, here is my code, can you please let me know how to validate the form using Semantic?

<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

Here's a little bit more elegant solution that follows Semantic UI fields identification standard.
Field could be identified not only via input[name="…"] CSS selector offered in Oniisaki's accepted answer, but also by DOM element id or data-validation attribute:

/**
 * 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.'
    }]
  }
});