How to do so that my field must at least be able to contain only numbers and a + in front of the number (if the user wishes)

Question

For example the user can enter: +444123454656656 OR 123454656656 - only numbers or a + in front of the number.

<TextFieldFormsy
    className="myclasse"
    variant="outlined"
    label={t("phone_number")}
    id="phone_number"
    name="phone_number"
    value={phone_number}
    onChange={handleChange}
/>

How do you want to enforce this? With an error message or with an override? — Domino987, Feb 04 '21 at 16:57
filter on the entry and only take into account the numbers and the + character in front of it (if the user enters it) — Alexandre, Feb 04 '21 at 17:04
You can simply filter the input in the onChange and save the input filtered. — Domino987, Feb 04 '21 at 17:05

score 0 · Answer 1 · answered Feb 04 '21 at 17:12

0

You can simply filter the input in onChange to remove everyting you do not want:

const isValidChar = (char, index) => {
    if(index === 0 && char === "+") {
        return true;
    } 
    return !isNaN(char);
}

const filteredInput = input.split("").filter((char, index) => isValidChar(char, index)).join("")

here is a fiddle for the filter.

answered Feb 04 '21 at 17:12

Domino987

8,475
2
15
38

how can I integrate this into my < thank you for the answer – Alexandre Feb 04 '21 at 17:19
Put this into the onChange method and save the filtered Input – Domino987 Feb 04 '21 at 17:57
Great, can you accept this answer, so others can find the solution too – Domino987 Feb 04 '21 at 18:10

How to do so that my field must at least be able to contain only numbers and a + in front of the number (if the user wishes)

1 Answers1