How can i trim space in input field ?

[a7medalyousofi]

i tried to use validate function but its doesn't work will !! Using version 7

<textarea
    id='message'
    {...register("message", {
        required: "This is required",
        minLength: {
            value: 10,
            message: "Min 10 characters",
        },
        maxLength: {
            value: 500,
            message: "Max length exceeded",
        },
        validate: (value) => {
            return !!value.trim();
        },
    })}
    className={ errors.message && "border !border-red-500 ring-1 !ring-red-500" }
    rows='6'
    placeholder='Tell me a little about your project...'
/>

{errors.message &&
    (errors.message.type === "required" ||
    errors.message.type === "minLength" ||
    errors.message.type === "maxLength") && (
    <span className='mt-2 text-sm text-red-400'>
        {errors.message.message}
    </span>
)}

[Moshyfawn]

If you want to update your input value, (to "control it's value"), you need to opt into using controlled inputs (the Controller / useController API). With uncontrolled inputs (the register API), the source of truth for your value is the input itself and you can't control it other than enter it's value via an input element, whereas you can manipulate the controlled input's value since it's stored in React (RHF form values in case of this package) and you need to "feed" it into the input's value prop.

[a7medalyousofi]

i checked out a video that in docs, i follow that approch, but i think there is a missunderstanding form my side about how fix this issue,

this is what i cameup with

const Controller = ({
	register,
	name,
	rules,
	render,
	label,
	type,
	placeholder,
	rows,
}) => {
	const props = register(name, rules, label, type, placeholder, rows);

	return render({
		onChange: (e) =>
			props.onChange({
				target: {
					name,
					value: e.target.value,
				},
			}),
		onblur: props.onblur,
		name: props.name,
		label,
		type,
		placeholder,
		rows,
	});
};

const Textarea = (props) => {
	const [value, setValue] = useState(props.value || "");

	return (
		<>
			<div className='textarea__wrapper'>
				<label htmlFor={props.name}>{props.label}</label>
				<textarea
					id={props.name}
					type={props.type}
					placeholder={props.placeholder}
					name={props.name}
					value={value}
					rows={props.rows}
					onChange={(e) => {
						setValue(e.target.value);
						props.onChange && props.onChange(e);
					}}
				/>
			</div>
		</>
	);
};

This is how i use it

<Controller
	{...{
		register,
		name: "message",
		placeholder: "Tell me a little about your project...",
		type: "textarea",
		label: "How can i help ?",
		rows: 6,
		rules: {
			required: "This is required",
			minLength: {
				value: 10,
				message: "Min 10 characters",
			},
			maxLength: {
				value: 500,
				message: "Max length exceeded",
			},
			validate: (value) => {
				return !!value.trim();
			},
		},
		render: (props) => <Textarea {...props} />,
	}}
/>

the spaces in message value is not trimmed,

if you can help me by rewrite the code in the right way i will appreciate,

Thanks in advance

[paulhuisman]

I solved it using the following in the register method:

setValueAs: (value: string) => value.trim()