Fields configured as mandatory are not being validated and are ignored.

[marcio1002]

Used libraries

• "zod": "^3.22.4"
• "react-hook-form": "^7.49.3"
• "@hookform/resolvers": "^3.3.4"

Describe the bug According to the documentation, the fields are applied by default as mandatory, but these fields are not being validated as mandatory in this new version of zod and react-hook-form. I created a custom component for input and select and pass the ref with forwardRef. I believe this is not the reason, because I tested with html input directly and the validation allows empty fields to pass.

function InputElement(
    {
        onChange,
        className = "",
        icon = undefined,
        customBoxInputClass = "",
        customInputClass = "",
        customBoxIconClass = "",
        onClickIcon = undefined,
        hasValidator = false,
        isInvalid = false,
        ...props
    }: InputProps,
    ref: Ref<HTMLInputElement>
) {
    const [isNotEmptyValue, setIsNotEmptyValue] = useState(false);

    const isShowIconError = hasValidator && isInvalid;
    const isShowIconSuccess = isNotEmptyValue && hasValidator && !isInvalid;

    const inputStateValidatorClass = isShowIconSuccess
        ? "!border-plt-green has-[:focus]:!border-plt-green"
        : isShowIconError
            ? "!border-plt-red has-[:focus]:!border-plt-red"
            : "";

    function handleChange(event: ChangeEvent<HTMLInputElement>) {
        onChange && onChange(event);

        setIsNotEmptyValue(event.target.value.length > 0);
    }

    return (
        <div className={css(containerInputClass, inputStateValidatorClass, className)}>
            <div className={css(boxInputClass, customBoxInputClass)}>
                <input
                    className={css(inputClass, customInputClass)}
                    {...props}
                    onChange={handleChange}
                    ref={ref}
                />
            </div>

            {isValidElement(icon) && (
                <div className={css(boxIconClass, customBoxIconClass)} onClick={onClickIcon}>
                    {icon}
                </div>
            )}

            {hasValidator && (
                <div className={css(boxIconClass, customBoxIconClass)}>
                    {isShowIconError && (
                        <IoCloseCircleOutline className={css(iconCheckClass, "text-plt-red")} />
                    )}

                    {isShowIconSuccess && (
                        <IoCheckmarkCircleOutline className={css(iconCheckClass, "text-plt-green")} />
                    )}
                </div>
            )}
        </div>
    );
}

export const Input = forwardRef(InputElement);

[jorisre]

Could you please provide a minimal reproduction using Codesandbox?