Semantic-Org/Semantic-UI · warning

{name} must have a value

Error message

{name} must have a value

What it means

This is a validation prompt (user-facing message) used by Semantic UI's Form module. It is displayed when a field with the 'empty' validation rule fails because the field's value is undefined, an empty string, or an empty array. The prompt is retrieved via module.get.prompt() (form.js:440-442) which looks up settings.prompt[ruleName], and the {name} placeholder is replaced with the field's label text or placeholder.

Source

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

  regExp: {
    htmlID  : /^[a-zA-Z][\w:.-]*$/g,
    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',

View on GitHub (pinned to 597843ab84)

Solutions

  1. Ensure the user provides a value before form submission (this prompt IS the solution for empty required fields).
  2. Customize the prompt text to be more specific: settings.prompt.empty = 'Please enter your {name}'.
  3. Set the field's label text so {name} resolves to a meaningful field name.
  4. If the field is genuinely optional, add optional: true to the field's validation config or remove the 'empty' rule.

Example fix

// before
$('.ui.form').form({
  name: { rules: [{ type: 'empty', prompt: '{name} must have a value' }] }
  // generic prompt
});

// after
$('.ui.form').form({
  name: {
    identifier: 'name',
    rules: [{ type: 'empty', prompt: 'Please enter your full name' }]
  }
});
Defensive patterns

Strategy: validation

Validate before calling

// Pre-validate required fields before form submission
function validateRequired($form) {
  var valid = true;
  $form.find('[data-validate="empty"]').each(function() {
    if (!$(this).val()) {
      valid = false;
      console.warn('Field is empty:', $(this).attr('name'));
    }
  });
  return valid;
}
if (validateRequired($('.ui.form'))) {
  $('.ui.form').form('validate form');
}

Type guard

// Check if a field has a non-empty value
function isFieldFilled($field) {
  var val = $field.val();
  return val !== undefined && val !== '' && !($.isArray(val) && val.length === 0);
}

Prevention

When it happens

Trigger: A field is configured with rules: [{ type: 'empty' }] and the user submits or blurs the field with no value. The validate.rule() function (form.js:1014) calls the 'empty' rule function (form.js:1337-1338) which returns false when value === undefined || value === '' || (isArray && length === 0), triggering the prompt.

Common situations: Required form fields left empty on submit. Fields where the user enters only whitespace (depending on whether trimming is configured). Dynamically added fields that lose their value. Select elements with no option chosen. Hidden fields that were programmatically cleared.

Related errors


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