1

tengo un problema al querer validar un input, que solo se utilicen letras en react codigo de la funcion:

class REGISTRARUSER extends Component{
    constructor(props){
        super(props);

        this.state={
            nombre: '',
            email:''

        };
       this.handlkeyPress = this.handlkeyPress.bind(this);
       this.handleChangeInput = this.handleChangeInput.bind(this);

    };

    handlkeyPress(evento){
      // console.log(String.fromCharCode(event.keyCode));
      let tecla = evento.which;
      let caracter = String.fromCharCode(tecla)
      let regex = new RegExp("^[a-zA-Z ]+$");


      if(!regex.test(caracter)){
          console.log("es numero");
          return false;
      }

    }
handleChangeInput(evento){

    const {name, value} = evento.target;//destructurin de los valores enviados por el metodo onchange de cada input
    this.setState({
        [name] : value //al elemento dentro de [] es una key de cada parametro dentro del estado.
    });
}

Por lo que he visto al devolver un return false, no debería aparecer la tecla que se presiono si es que esta es un numero, ya que solo deberían aparecer letras escritas dentro del input, pero no me funciona, no se si la funcion esta mal o es por que en la funcion onchange modifico el state con lo que introduzco en el input

input:

    <input
      id="nombre"
      name="nombre"
      type="text"
      placeholder="Ingrese el Nombre"
      value={this.state.nombre}
      onChange={this.handleChangeInput}
      onKeyPress={this.handlkeyPress}
    />
1
  • 1
    Ese tipo de validaciones hacen su trabajo, sin embargo, te recomendaría no hacerlo de esa forma, sino limitar el ingreso de caracteres no alfabéticos, existe una sencilla librería que puedes integrar denominada Cleave.js, aquí te dejo el sitio web nosir.github.io/cleave.js. el 24 jun. 2019 a las 15:00

2 respuestas 2

1

logre hacerlo de esta manera, quiza no sea la mejor pero si la prueban podrian indicarme en que mejorar.

class REGISTRARUSER extends Component{
constructor(props){
    super(props);

    this.state={
        nombre: '',
    };

   this.handleChangeInput = this.handleChangeInput.bind(this);


};

   handleChangeInput(evento){
    const {name, value} = evento.target;//destructurin de los valores enviados por el metodo onchange de cada input
    let regex = new RegExp("^[ñíóáéú a-zA-Z ]+$");
    for(let i = 0; i <= value.length -1; i++){
        let letra = value[i]
        if(!regex.test(letra ) || !letra === " "){
                return;
        }
    }

        this.setState({
            [name] : value //al elemento dentro de [] es una key de cada parametro dentro del estado.
        }); 

}

el código del input

<input id="nombre" name="nombre" type="text" placeholder="Ingrese el Nombre" value={this.state.nombre} onChange={this.handleChangeInput} />
0

Personalmente, creo que no es necesario que uses 2 eventos, con onChange debería ser suficiente.

class REGISTRARUSER extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      nombre: "",
      email: ""
    };
    this.handleChangeInput = this.handleChangeInput.bind(this);
  }

  handleChangeInput(evento) {
    //destructurin de los valores enviados por el metodo onchange de cada input
    const { name, value } = evento.target;
    let regex = new RegExp("^[a-zA-Z ]+$");

    if (regex.test(value)) {
      console.log(name, value);
      this.setState({
        //al elemento dentro de [] es una key de cada parametro dentro del
        //estado.
        [name]: value
      });
    } else {
      console.log("es numero");
    }
  }

  render() {
    return (
      <input
        id="nombre"
        name="nombre"
        type="text"
        placeholder="Ingrese el Nombre"
        value={this.state.nombre}
        onChange={this.handleChangeInput}
      />
    );
  }
}

ReactDOM.render(<REGISTRARUSER />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Ojo con la validación eso sí, lo que implementas fallaría con algún Zañartu o José. Una opción que funciona con la gran mayoría de caracteres latinos, cirílicos, griegos y armenios es comparar el case de cada carácter con:

function isLetter(c) {
  return c.toLowerCase() != c.toUpperCase();
}

Claramente esto no funciona con caracteres que no tengan mayúscula y minúscula como Chino, Japonés, lenguas Arabes, Hebreo, etc...

4
  • 1
    Gracias compadre, era lo que necesitaba me estaba mareando con esto que quizá sea básico jajaj el 25 jun. 2019 a las 1:37
  • Amigo, trate de usar tu respuesta, pero al tratar de borrar la ultima letra no se borra, y me di cuenta que en esta pagina al ejecutar la respuesta sucede lo mismo si me podrías ayudar con esto que es lo ultimo please :/ el 25 jun. 2019 a las 3:44
  • No necesitas el regex.test, solo necesitas negar la expresión regular para que coincida cualquier carácter que no sea una letra y reemplazarlo por un string vacío usando: str.replace(regex, '').
    – gugadev
    el 25 jun. 2019 a las 14:39
  • @gugadev mi intención era modificar lo menos posible la lógica del código del OP, pero sí, es otra opción válida la que presentas. el 25 jun. 2019 a las 21:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.