I have one form in react in which I have used formik and Yup library for validations. I have requirement that input field should allow only lowercase alphanumeric values which allow hyphen and length between 2 to 30 characters. Also if user is typing Uppercase letters or space then convert that string to lowercase and replace space with hyphen.
e.g. for input like “Shop name123” should convert to “shop-name123”
formik validation is as follows:
postfix: Yup.string()
.required(message.ENTER_POSTFIX)
.matches(new RegExp("^[a-z0-9- ]{2,30}$"), {
message: message.PUBLIC_URL_POSTFIX_INVALID,
})
on change of that field I have following code
<Field
type="text"
className="form-control"
style={{ marginTop: "32px" }}
value={values.postfix? values.postfix: ""}
name="postfix"
onChange={(e) => {
setFieldValue(
"postfix",
tranformStrToVar(e.target.value)
);
}}
/>
method tranformStrToVar
as follows
export function tranformStrToVar(str) {
let newStr = "";
if (str) {
newStr = str.replace(/s+/g, "-").toLowerCase();
newStr.match(/[^/]+/g).join("-");
}
return newStr;
}
With above code working for some cases and getting failed if input has only “—–” etc. That also should not allowed.
How should I validate and convert input at same time and get valid, required input having lowercase alphanumeric seperated by hyphen having character length between 2 to 30 ?
Please help and guide. Thanks