Topic: mdbootstrap validation type="number" react

marrielle.aboujaoude free asked 4 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 . + -"

enter image description here

Jakub Chmura staff answered 4 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(); += ' was-validated';

  handleChange = evt => {
    const typeNumber =
      : this.state.typeNumber;
    this.setState({ typeNumber });

  render() {
    return (
          <MDBCol md='4' className='mb-3'>
          <MDBBtn color='primary' type='submit'>
            Submit Form
export default FormsPage;

Best regards, Kuba


marrielle.aboujaoude free commented 4 years ago

Thank you for answering my question, that was very useful for me! :)

Jakub Chmura staff commented 4 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 4 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 4 years ago

Hi @marrielle.aboujaoude,

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,


Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • 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