mdbootstrap validation type=number react

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;

Rabie.jabasini commented 5 years ago

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

---

Jakub Chmura staff premium 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 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 premium commented 5 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,

Kuba

---