This site contains the document for old version. Please upgrade to the latest version v1.0.0

Requiring at least one field

Examples

In fact, the form might have multiple fields with the same validator rules but at least one of them is required. We can't use neither the notEmpty validator nor HTML 5 required attribute for all of them.

Fortunately, this can be done easily by

  • Using the selector option to define validators for all fields. So, we don't need to indicate the validator rules for each separate field.
  • Using the callback validator to check if one of fields is not empty. And then update the result of callback validator via the updateStatus() method.
You also can look at the Using hidden field technique example which introduces another way to require one of two fields
<form id="profileForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Email address</label>
        <div class="col-xs-5">
            <input type="text" class="form-control emailAddress" name="primary_email" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-5 col-xs-offset-3">
            <input type="text" class="form-control emailAddress" name="secondary_email" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-9 col-xs-offset-3">
            <button type="submit" class="btn btn-default">Validate</button>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#profileForm').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            email: {
                // All the email address field have emailAddress class
                selector: '.emailAddress',
                validators: {
                    callback: {
                        message: 'You must enter at least one email address',
                        callback: function(value, validator, $field) {
                            var isEmpty = true,
                                // Get the list of fields
                                $fields = validator.getFieldElements('email');
                            for (var i = 0; i < $fields.length; i++) {
                                if ($fields.eq(i).val() !== '') {
                                    isEmpty = false;
                                    break;
                                }
                            }

                            if (!isEmpty) {
                                // Update the status of callback validator for all fields
                                validator.updateStatus('email', validator.STATUS_VALID, 'callback');
                                return true;
                            }

                            return false;
                        }
                    },
                    emailAddress: {
                        message: 'The value is not a valid email address'
                    }
                }
            }
        }
    });
});
</script>