CODEWITHSUNDEEP
javascriptreactjsreact-hooks
samurai
samurai

Reputation: 57

how can I restrict user to write + character in input field in react

how can i restrict user to write + character in input field in react ?

The problem is when ever user try to submit a blog post with title contain + character

server gives error . can not read a to Object , i could not fix the server

then i want try other solution . i want restrict user to not type + character in title of the post

how can i do that ?

my input field code is . currently user can write any thing include persian alphabet and numbers and english alphabet and it just work fine , but how can i restrict user to write + character in title

sorry for bad english

              <Input
                maxLength={70}
                type="text"
                dir="rtl"
                ref={titleRef}
                id="title"
                value={title}
                onBlur={(e) => setTitle((prev) => prev.trim())}
                onChange={(e) => setTitle(e.target.value)}
                required
              />

Upvotes: 0

Views: 762

Answers (2)

kbeloin
kbeloin

Reputation: 199

You could try the to add to your Input component the "pattern" attribute, which is available on "input" elements natively:

    <input pattern="[^+]*" />

This allows you to set custom messages when users enter incorrect characters, too!

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern

Upvotes: 1

Codes_matter
Codes_matter

Reputation: 11

  const handleChange = event => {
    const result = event.target.value.replace('+', '');
    setTitle(result);
  };

<Input
  maxLength={70}
  type="text"
  dir="rtl"
  ref={titleRef}
  id="title"
  value={title}
  onChange={handleChange}
  required
 />

Upvotes: 1

Related Questions