Text field with only numbers - React

Question

I am trying to do the text field that will accept only numbers in the format like phone number: xxx-xxx-xxx. I dont want to use the basic thext field format of type="number". Here is my code:

const PatientEditScreen = ({ match }) => {
 const patientId = match.params.id;
 const [phone, setPhone] = useState(0);

useEffect(() => {
    if (!patient.name || patient._id !== patientId) {
      dispatch(listPatientDetails(patientId));
    } else {
      setPhone(patient.phone); 
    }
  }, [dispatch, patientId, patient]);

return (
    <>
      <h1>Edit Patient</h1>
          <Card className="mb-3 border-dark">
            <Card.Body>
              <Form onSubmit={submitHandler}>
                <Form.Row>
                  <Form.Group controlId="phone" as={Col} variant="flush">
                    <Form.Label as="h5">Phone Number</Form.Label>
                    <Form.Control
                      type="number"
                      pattern="[0-9]*"
                      placeholder="Enter Phone Number"
                      value={phone}
                      onChange={(e) => setPhone(e.target.value)}
                    ></Form.Control>
                  </Form.Group>
                </Form.Row>
              </Form>
            </Card.Body>
          </Card>
      )}
    </>
  );
};

export default PatientEditScreen;

You're already using a pattern, so I think the question is "what is a regular expression for a phone number", isn't it? In which case check here: https://stackoverflow.com/questions/16699007/regular-expression-to-match-standard-10-digit-phone-number — user2740650, Nov 15 '20 at 18:26
Yes it's rendering field in witch i can put number but it is basic number field — Kamil Wojtczyk, Nov 15 '20 at 21:15

score 1 · Answer 1 · answered Nov 15 '20 at 18:36

1

I had this issue before and found easier option to use because probably there will be bugs in the input field depends on browsers even if it works on one of them fine. I have used directly this github repository which comes with good UI as well. I recommend you to have a look https://gitlab.com/catamphetamine/react-phone-number-input .

answered Nov 15 '20 at 18:36

Evren

4,147
1
9
16

Good idea, do you know how to style this because it's really big and i dont know how to delete icon – Kamil Wojtczyk Nov 15 '20 at 19:05
If you target svg in css and make it svg {display: none} in Phone input class you can make in invisible but depends on what you want to change. You can use same procedure also for input styling. – Evren Nov 15 '20 at 19:36

score 1 · Answer 2 · answered Nov 15 '20 at 19:29

this is it:

import React from "react";
import "./style.css";
export default function App() {
  return (
    <div>
      <input
        class="form-control"
        placeholder="xxx"
        type="text"
        maxlength="3"
        pattern="[0-9]{3}"
      />
      -
      <input
        class="form-control"
        placeholder="xxx"
        type="text"
        maxlength="3"
        pattern="[0-9]{3}"
      />
      -
      <input
        class="form-control"
        placeholder="xxx"
        type="text"
        maxlength="3"
        pattern="[0-9]{3}"
      />
    </div>
  );
}

check:https://stackblitz.com/edit/react-q2fjbw?file=src%2FApp.js

score 0 · Accepted Answer · answered Nov 15 '20 at 18:29

0

You can do something like:

            <Form.Control
              type="number"
              pattern="^[1-9]\d{3}-\d{3}-\d{3}"
              placeholder="Enter Phone Number"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}

Or, if you don't want to use the 'pattern' attribute (or it's not working), you can call a function instead of the setPhone, and validate it there with regex.

answered Nov 15 '20 at 18:29

Or Assayag

5,662
13
57
93

You can search a pattern here: https://stackoverflow.com/questions/16699007/regular-expression-to-match-standard-10-digit-phone-number – Or Assayag Nov 15 '20 at 19:06

Text field with only numbers - React

3 Answers3