Hello,
I have the following form, but for some reason the button is not triggering the method execution neither the validator regex is working. some help would be greatly appreciated.
const inputRegex = new RegExp(/^([a-zA-Z\d\.,%/\-_].*)/);
const inputValidator = (value) =>
inputRegex.test(value) ? "" : "Please enter a valid value.";
return (
<Form className="mt-3 mb-4 px-0" onSubmit={postCompressorSave}
render={(formRenderProps) => (
<FormElement
style={{
maxWidth: 650,
}}
>
<fieldset className={"k-form-fieldset"}>
<legend className={"k-form-legend"}>
Please fill in the email field:
</legend>
<div className="mb-3">
<Field
name={"nikname"}
component={NicknameInput}
label={"NickName"}
validator={inputValidator}
/>
</div>
</fieldset>
<div className="k-form-buttons">
<button type={"submit"} className="btn btn-outline-success btn-block mt-1"
style={{height: "30px", fontSize: "16px", paddingTop: "4px"}}>
Save
</button>
</div>
</FormElement>
)}
/>
)
}
1 Answer, 1 is accepted
0
Daniela
Top achievements
Rank 1
Iron
Iron
Iron
Rank 1
Iron
Iron
Iron
answered on 22 Oct 2021, 09:06 AM
It was my mistake I was missing the {...others} object , this is how it should look:
const NicknameInput = (fieldRenderProps) => {
const { validationMessage, visited, ...others } = fieldRenderProps;
return (
<div>
<label for="nickname-name" className="text-info">Nickname</label>
<Input type="text" name="nickname" placeholder=""
style={{height: "30px"}}
onChange={e=>setCompNickname(e.target.value)}
{...others}/>
{visited && validationMessage && <Error>{validationMessage}</Error>}
</div>
);
};