Semantic-Org/Semantic-UI · warning

{name} must be a valid e-mail

Error message

{name} must be a valid e-mail

What it means

This is a validation prompt used by Semantic UI's Form module. It is displayed when an input with the 'email' validation rule fails because the value does not match the email regular expression (form.js:1240). The prompt is retrieved via module.get.prompt() (form.js:440-442) with {name} replaced by the field's label. The 'email' rule function (form.js:1347-1348) tests the value against settings.regExp.email.

Source

Thrown at src/definitions/behaviors/form.js:1256

    bracket : /\[(.*)\]/i,
    decimal : /^\d+\.?\d*$/,
    email   : /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i,
    escape  : /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,
    flags   : /^\/(.*)\/(.*)?/,
    integer : /^\-?\d+$/,
    number  : /^\-?\d*(\.\d+)?$/,
    url     : /(https?:\/\/(?:www\.|(?!www))[^\s\.]+\.[^\s]{2,}|www\.[^\s]+\.[^\s]{2,})/i
  },

  text: {
    unspecifiedRule  : 'Please enter a valid value',
    unspecifiedField : 'This field'
  },

  prompt: {
    empty                : '{name} must have a value',
    checked              : '{name} must be checked',
    email                : '{name} must be a valid e-mail',
    url                  : '{name} must be a valid url',
    regExp               : '{name} is not formatted correctly',
    integer              : '{name} must be an integer',
    decimal              : '{name} must be a decimal number',
    number               : '{name} must be set to a number',
    is                   : '{name} must be "{ruleValue}"',
    isExactly            : '{name} must be exactly "{ruleValue}"',
    not                  : '{name} cannot be set to "{ruleValue}"',
    notExactly           : '{name} cannot be set to exactly "{ruleValue}"',
    contain              : '{name} must contain "{ruleValue}"',
    containExactly       : '{name} must contain exactly "{ruleValue}"',
    doesntContain        : '{name} cannot contain  "{ruleValue}"',
    doesntContainExactly : '{name} cannot contain exactly "{ruleValue}"',
    minLength            : '{name} must be at least {ruleValue} characters',
    length               : '{name} must be at least {ruleValue} characters',
    exactLength          : '{name} must be exactly {ruleValue} characters',
    maxLength            : '{name} cannot be longer than {ruleValue} characters',
    match                : '{name} must match {ruleValue} field',

View on GitHub (pinned to 597843ab84)

Solutions

1. Ensure the user enters a properly formatted email address (this prompt IS the validation feedback).
2. Customize the prompt for clarity: settings.prompt.email = 'Please enter a valid email address for {name}'.
3. If supporting internationalized emails, override settings.regExp.email with a more permissive regex.
4. Add client-side formatting hints (e.g., placeholder='user@example.com') to guide user input.

Example fix

// before
$('.ui.form').form({
  email: { rules: [{ type: 'email', prompt: '{name} must be a valid e-mail' }] }
  // regex rejects unicode emails
});

// after
$('.ui.form').form({
  email: {
    identifier: 'email',
    rules: [{ type: 'email', prompt: 'Please enter a valid email (e.g., name@example.com)' }]
  }
});
// Optionally override the regex for broader support:
// $.fn.form.settings.regExp.email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

// Pre-validate email format before form submission
function validateEmail(value) {
  var re = /^[a-z0-9!#$%&'*+\\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;
  return re.test(value);
}
var email = $('#email-field').val();
if (!validateEmail(email)) {
  console.warn('Invalid email format:', email);
}

// Type guard: check if a string is a valid email per Semantic UI's regex
function isValidEmail(value) {
  if (!value || typeof value !== 'string') return false;
  return $.fn.form.settings.regExp.email.test(value);
}

When it happens

Trigger: A field is configured with rules: [{ type: 'email' }] and the user enters a value that does not match the email regex /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i. This includes missing '@', missing domain, invalid characters, or missing top-level domain.

Common situations: Users typing 'john' instead of 'john@example.com'. Email addresses with spaces or special characters. Internationalized email addresses with Unicode characters (not supported by this regex). Copy-pasted emails with trailing spaces or invisible characters. Emails from autocomplete that insert a display name.

Related errors

• {name} must have a value
• {name} must be checked
• {name} must be a valid url
• {name} is not formatted correctly
• Progress value is non numeric

AI-assisted analysis of Semantic-Org/Semantic-UI@597843ab84 (2026-08-13). Data as JSON: /api/errors/70544889595fecba. Report an issue: GitHub.