How do I prevent user from entering a username that starts with a number, but allow numbers only after alpha characters?

Question

I have this code bellow and my trouble is when I want to check whether user has entered a number in front using startsWith() function, I get a "TypeError: usernameField.startsWith is not a function". How do I prevent user from entering a username that starts with a number, but allow numbers only after alpha characters, such that when they put a number in front it shows for glance and then gets replaced with nothing?

import React, { Component } from "react";
import SignupForm from "./components/SignupForm";

class App extends Component {
  constructor() {
    super();
    this.state = {
      username: "",
    };

    this.changeValue = this.changeValue.bind(this);
    this.removeNumbers = this.removeNumbers.bind(this);

  }

changeValue(event) {
    this.setState({
      [event.target.name]: event.target.value,
    });
  }

removeNumbers(usernameField) {
    let numbers = /[0-9]/gi;
    if (usernameField.startsWith(numbers)) {
        usernameField.target.value = usernameField.target.value.replace(numbers, "");
    }
}

render() {
    return (
        <div className="App">            
          <SignupForm
             changeValueHandler={this.changeValue}
             usernameValue={this.state.username}
             usernameCharacterFilter={this.removeNumbers}
           />
        </div>         
    );
  }
}

export default App;

import React from "react";

export default function SignupForm(props) {
  return (
    <div className="container">
      <h1>Signup Form</h1>
      <div className="form-div">
        <form>
          <input
            name="username"
            type="text"
            placeholder="Username"
            onChange={props.changeValueHandler}
            onKeyUp = {props.usernameCharacterFilter}
            value={props.usernameValue}
          />
        </form>
      </div>
    </div>
  );
}

score 1 · Accepted Answer · answered Apr 07 '21 at 08:41

Issues

String.prototype.startsWith doesn't consume a regex pattern.
The keyUp event object wasn't accessed correctly. Throwing error on usernameField.startsWith(numbers) when it should be usernameField.target.value.startsWith(numbers).

Solution

I don't think the onKeyUp callback is necessary. What you describe wanting is after some time of input a check should be made to test if the username state begins with a number.

Use String.prototype.replace with a regex /^[0-9]*/gi.
Use a debounced callback to check the username state value, called from the componentDidUpdate lifecycle method.

Code:

function SignupForm(props) {
  return (
    <div className="container">
      <h1>Signup Form</h1>
      <div className="form-div">
        <form>
          <input
            name="username"
            type="text"
            placeholder="Username"
            onChange={props.changeValueHandler}
            value={props.usernameValue}
          />
        </form>
      </div>
    </div>
  );
}

export default class App extends Component {
  state = {
    username: ""
  };

  componentDidUpdate(prevProps, prevState) {
    if (prevState.username !== this.state.username) {
      this.removeLeadingNumbers();
    }
  }

  changeValue = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };

  removeLeadingNumbers = debounce(
    () => {
      this.setState((prevState) => ({
        username: prevState.username.replace(/^[0-9]*/gi, "")
      }));
    },
    1000,
    { maxWait: 3000 }
  );

  render() {
    return (
      <div className="App">
        <SignupForm
          changeValueHandler={this.changeValue}
          usernameValue={this.state.username}
        />
      </div>
    );
  }
}

How do I prevent user from entering a username that starts with a number, but allow numbers only after alpha characters?

1 Answers1

Issues

Solution

Demo