CODEWITHSUNDEEP
htmlcssreactjsinputsemantic-ui-react
Maarduk
Maarduk

Reputation: 266

Limitted character input

I'm trying to create input limitted to only 4 characters using reactjs semantic ui, I have tried a lot of ways of doing that but none of them seems to work.

<Input fluid
  value={this.state.code}
  type="text"
  minlength="4" maxlength="8" size="10"
  placeholder={t('Code')}
  onChange={this.onCodeChange.bind(this)}
  error={this.state.formErrorsKeys.code}
/>

Also I'm thinking if it's possible to make an input splitted into 4 input areas.

Cheers!

Upvotes: 1

Views: 1837

Answers (2)

Dan
Dan

Reputation: 301

All you need is to add custom validation function which takes the input value and returns modified string.

Something like this:

const validateField = string => {
    return string.slice(0, 4);
};

console.log(validateField('string')); // => 'stri'
console.log(validateField('test_test')); // => 'test'

Here is an example: https://codesandbox.io/s/r55228449p

UPD

Also I'm thinking if it's possible to make an input splitted into 4 input areas

Updated the example to add something similar to "an input splitted into 4 input areas"

Upvotes: 2

Max
Max

Reputation: 1567

React Semantic UI expects camel case maxLength and minLength props which will be passed to the html input. You are using all lowercase. Changing the prop names should fix your issue, however as others have said, a custom validator function may be appropriate.

Upvotes: 0

Related Questions