mdbootstrap validation type=number react


Topic: mdbootstrap validation type="number" react

Rabie.jabasini 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 . + -"

enter image description here


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


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


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Open

Specification of the issue
  • User: 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