React项目中用combineValidators验证SelectInput空Guid值问题

Got it, let's figure out why your validation isn't working here. The problem is that your default isRequired validator doesn't recognize that empty Guid (00000000-0000-0000-0000-000000000000) as an invalid value—most standard required checks only look for null, undefined, or empty strings. Since that Guid is a non-empty string, the validator skips it. Here's how to fix this:

Step 1: Create a custom validator for empty Guid #

First, let's build a validator that explicitly checks for that empty Guid value. Since your SelectInput uses multiple={true}, we'll handle both single string values and arrays of strings:

const isNotEmptyGuid = (message: string) => (value: string | string[]) => {
  // Handle single selection case
  if (typeof value === 'string') {
    return value !== '00000000-0000-0000-0000-000000000000' ? undefined : message;
  }
  // Handle multiple selection array case
  if (Array.isArray(value)) {
    // Check if the array has at least one non-empty Guid
    const hasValidSelection = value.some(item => item !== '00000000-0000-0000-0000-000000000000');
    return hasValidSelection ? undefined : message;
  }
  // Fallback: treat null/undefined as invalid
  return message;
};

Step 2: Update your validation config #

Replace the standard isRequired calls with our new isNotEmptyGuid validator in your combineValidators setup:

const validate = combineValidators({
  projectId: isNotEmptyGuid("Please select a project"),
  achievementStageId: isNotEmptyGuid("Please select an achievement stage"),
  projectItemStatusId: isNotEmptyGuid("Please select a project item status"),
});

Optional: Adjust SelectInput to return null for unselected state #

If you want to align the component with standard form behavior (so you can keep using isRequired), modify the SelectInput to pass null instead of the empty Guid when no valid option is chosen. Here's the updated component:

import React from "react";
import { FieldRenderProps } from "react-final-form";
import { FormFieldProps, Form, Label, Select } from "semantic-ui-react";

interface IProps extends FieldRenderProps<string, any>, FormFieldProps {}

const SelectInput: React.FC<IProps> = ({ input, width, options, placeholder, meta: { touched, error }, }) => {
  const handleChange = (e: React.SyntheticEvent, data: any) => {
    const selectedValue = data.value;
    
    // Handle single selection
    if (typeof selectedValue === 'string') {
      input.onChange(selectedValue === '00000000-0000-0000-0000-000000000000' ? null : selectedValue);
    } 
    // Handle multiple selection
    else if (Array.isArray(selectedValue)) {
      const filteredValues = selectedValue.filter(val => val !== '00000000-0000-0000-0000-000000000000');
      input.onChange(filteredValues.length > 0 ? filteredValues : null);
    } else {
      input.onChange(selectedValue);
    }
  };

  return (
    <Form.Field error={touched && !!error} width={width}>
      <Select 
        value={input.value} 
        onChange={handleChange} 
        placeholder={placeholder} 
        options={options || []} 
      />
      {touched && error && (
        <Label basic color="red">
          {error}
        </Label>
      )}
    </Form.Field>
  );
};

export default SelectInput;

With this change, an unselected state will pass null to the form, which the original isRequired validator will catch as an error.

Why your original setup failed #

The default isRequired validator only flags null, undefined, or empty strings (''). Since your SelectInput was returning the empty Guid (a valid non-empty string), the validator didn't trigger the error. Our custom validator targets that specific Guid value, ensuring validation fires when no valid option is selected.

内容的提问来源于stack exchange，提问作者Mahmoud Bayoush