Topic: mdbootstrap validation type="number" react
marrielle.aboujaoude free asked 5 years ago
i'm using in my form an input type number, but what i want is to block the use of the following characters "e . + -"
Jakub Chmura staff answered 5 years ago
Hi, @Rabie.jabasini,
that's exactly how the spec says it should work. The number input can accept floating-point numbers, including negative symbols and the e or E character (where the exponent is the number after the e or E), but if you want to avoid to type characters like e
, +
, -
, .
change input type on text
and write a method that blocks NaN
characters.
I write a snippet to show you what I mean. You can use it of course.
import React from 'react';
import { MDBCol, MDBBtn, MDBInput } from 'mdbreact';
class FormsPage extends React.Component {
state = {
typeNumber: ''
};
submitHandler = event => {
event.preventDefault();
event.target.className += ' was-validated';
};
handleChange = evt => {
const typeNumber = evt.target.validity.valid
? evt.target.value
: this.state.typeNumber;
this.setState({ typeNumber });
};
render() {
return (
<div>
<form
className='needs-validation'
onSubmit={this.submitHandler}
noValidate
>
<MDBCol md='4' className='mb-3'>
<MDBInput
type='text'
pattern='[0-9]*'
onChange={this.handleChange}
value={this.state.typeNumber}
validate
/>
</MDBCol>
<MDBBtn color='primary' type='submit'>
Submit Form
</MDBBtn>
</form>
</div>
);
}
}
export default FormsPage;
Best regards, Kuba
Kuba
marrielle.aboujaoude free commented 5 years ago
Thank you for answering my question, that was very useful for me! :)
Jakub Chmura staff commented 5 years ago
Thank you for your feedback :).
If there is anything else I could do for you do not hesitate to ask me. I'll be happy to help you. :)
Best Regards, Kuba
marrielle.aboujaoude free commented 5 years ago
I'm not able to empty the field that i am using can you inform me why this is happening?
Jakub Chmura staff commented 5 years ago
I can't help you without your example, because when i was testing my solution everythink works fine.
Can you paste here a sample of your code?
Best regards,
Kuba
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.21.0
- Device: laptop
- Browser: chrome
- OS: windows
- Provided sample code: No
- Provided link: No