Only show the first issue during Semantic UI form validation

In my Chrome Extension I have a form with an email field which displays two different messages during validation (one error for an empty field, another for an invalid format).

The problem is, using the following validator my form displays both issues. I want to stop validating as soon as any field has an issue and display only the first error message.

fields: {
    email: {
        identifier: 'email',
        rules: [
            {
                type: 'empty',
                prompt: 'Please enter your email address'
            },
            {
                type: 'email',
                prompt: 'Please enter a valid email address'
            }
        ]
    }
}

At the moment I work around the issue with the following css hack, but I'd rather just finish the validation so it doesn't try to validate the rest of the form.

.ui.form .ui.error.message .list:not(.ui) li:not(:first-child) {
    display: none;
}

How do I stop validation after the first failure with Semantic UI?