Maxlength Does Not Work React Js

Maxlength does not work React Js

Property and attribute names are generally camelCase in React, maxLength works.

<input
onChange={this.handleChangeInput}
value={this.state.form.message}
type="text"
className="phone validate"
name="phone"
maxLength="11"
/>

However, you can still override this option if you give the input a value longer than maxLength. The only way around this is to check the length of the value in the callback, and truncate it.

Example

class App extends React.Component {
state = { form: { message: "" } };

handleChangeInput = event => {
const { value, maxLength } = event.target;
const message = value.slice(0, maxLength);

this.setState({
form: {
message
}
});
};

render() {
return (
<input
onChange={this.handleChangeInput}
value={this.state.form.message}
type="text"
className="phone validate"
name="phone"
maxLength="11"
/>
);
}
}

ReactJS input type = "text" maxLength is not working when passed as props

I finally figured out the answer and decided put it here for the people who may have the same question in the future :)

Answer:
if you want to pass maxLength as a props in React. You should use:

inputprops = {{maxLength = num}} (note: num can be any positive num you want. No {} and "" needed.

Then, in the place that receives this props, write:

inputprops = {this.props.inputprops} 

To limit the input length, write:

<Input 
inputprops={{maxLength: 100(e.g.)}}
/>

NOTE: Inputprops and inputprops are two different things in React. Be careful.

minLength doesn't work in typescript, react

Your code is fine. However minlength works different than maxlength.

  • HTML maxlength prevents the user from typing keys more than the maxlength.
  • HTML minlength will let the user enter less keys compared to the requirement. After all, they need to be able to start from less chars to come up to more chars. That said the field will show an error if minlenght is not met.
Complete example

Use this component and press the enter key to play around with the input field:

export default function App() {
return (
<form>
<input type="text" placeholder="text" required={true} minLength={2} maxLength={10} />
<button type="submit">Submit</button>
</form>
);
}
Screenshots

Because its required:
Sample Image

Because minlenght is not met:
Sample Image

Maxlength property of input field is not respected

Your problem here was that you had written maxlength when in JSX it should have been maxLength. This lower camel case approach is the same for all HTML attributes, e.g. cellPadding, encType, and so on.

Remember, your JSX ultimately is JavaScript; you should read the list of supported tags and attributes if you're not sure.

Minlength doesn't work when I add onChange property

You are manually changing the value, and for some reason this is messing with the form submission validator.
This line breaks - e.target.value = allowedNick;
Making component controlled solved this for me.

export function Test() {
const [text, setText] = useState('') // added state
const handleNickname = (e) => {

let allowedNick = e.target.value;
allowedNick = allowedNick.replace(/ /gi, "");
allowedNick = allowedNick.replace(
/[~\-+=!?@#$%₩^&*|(){}\[\]\\\/'";:<>,]/gi,
""
);
setText(allowedNick) // changing state
};
return <form>
<input type="text" placeholder="text" onChange={handleNickname} required={true} minLength={2} maxLength={10} value={text} />
<button type="submit">Submit</button>
</form>
}


Related Topics



Leave a reply



Submit