Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
marcio1002 opened this issue Jan 24, 2024 · 0 comments
Open

Comments

@marcio1002
Copy link

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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant