how to check if string contains number with react

Question

I am building a user validation website, I want each input to verify if the string that was entered:

Have uppercase first letter
doesn't contain numbers
doesn't contain "$%^&*()"

I did the first task, but I can't do the last ones.

I have tried !isNaN(firstName) === true and it wont work

import React, { Component } from 'react';

class Profile extends Component {
  state = {
    details: {
      firstName: '',
      lastName: '',
      ID: '',
      Email: ''
    },
    error: false,
    complete: false
  };

  OnSubmit = e => {
    e.preventDefault();
    const { firstName } = this.state.details;
    if (
      firstName.charAt(0) !== firstName.charAt(0).toUpperCase() &&
      !isNaN(firstName) === true
    ) {
      this.setState({ error: true });
    } else {
      this.setState({ complete: true });
    }
  };

  OnChange = e => {
    e.preventDefault();
    this.setState({
      details: { ...this.state.details, [e.target.name]: e.target.value }
    });
  };

  render() {
    return (
      <div>
        <div className="container text-center mt-4" style={{ width: '500px' }}>
          <form className="px-4 py-3" onSubmit={this.OnSubmit}>
            <div className="form-group">
              {this.state.error === true ? (
                <p className="text-danger">
                  Some of the details are wrong check the fields above
                </p>
              ) : null}
              <label>First Name:</label>
              <input
                type="text"
                className="form-control"
                onChange={this.OnChange}
                name="firstName"
              />
            </div>
            <div className="form-group">
              <label>Last Name:</label>
              <input
                type="text"
                className="form-control"
                onChange={this.OnChange}
                name="lastName"
              />
            </div>
            <div className="form-group">
              <label>ID Number:</label>
              <input
                type="text"
                className="form-control"
                onChange={this.OnChange}
                name="ID"
              />
            </div>
            <div className="form-group">
              <label>Email:</label>
              <input
                type="text"
                className="form-control"
                onChange={this.OnChange}
                name="Email"
              />
            </div>
            <button type="submit" className="btn btn-secondary mt-3">
              Check
            </button>
          </form>
        </div>
      </div>
    );
  }
}

export default Profile;

solution to your answer is REGEX - geeksforgeeks.org/write-regular-expressions — ravibagul91
– ravibagul91, Commented Jun 7, 2019 at 8:56

sachin kalekar · Accepted Answer · 2019-06-07 08:39:36Z

5

You can use regex.

!firstName.match(/\d/)

\d checks for the numbers

answered Jun 7, 2019 at 8:39

sachin kalekar

5363 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Manoj Kumar · Accepted Answer · 2019-06-08 04:45:22Z

4

function validateName(name) {
  var isValidName = true;
  if(/[!@#$%^&*(),.?":{}|<>]/g.test(name) || !/^[A-Z]/.test(name) || /\d+/g.test(name)) {
    isValidName = false;
  }
  return isValidName;
}

validateName("David")

edited Jun 8, 2019 at 4:45

answered Jun 7, 2019 at 9:35

Manoj Kumar

1286 bronze badges

Comments

Engineer · Accepted Answer · 2019-06-07 08:49:04Z

1

First split firstName, then check for Number in that array

OnSubmit = e => {
    e.preventDefault();
    const { firstName } = this.state.details;
    let firstNameArr = firstName.split('');

    for(value of firstName.split('')){
        if (!isNaN(value) {
          this.setState({ error: true });
        } else {
          this.setState({ complete: true });
        }       
    }
  };

answered Jun 7, 2019 at 8:49

Engineer

1,26111 silver badges18 bronze badges

Comments

Mosè Raguzzini · Accepted Answer · 2019-06-07 09:05:13Z

0

This is how I would do it:

const test1 = "%2mfas1k";
const test2 = '123';
const test3 = 'test';

function test(str) {
  const match = str.match(/\d+/g);
  const isArray = Array.isArray(match);
  if(isArray) return match.map(Number);
  return false
}

// If test return a result not falsy, contains a number
console.log(test(test1)); // [2, 1]
console.log(test(test2)); // [123]
console.log(test(test3)); // false

answered Jun 7, 2019 at 9:05

Mosè Raguzzini

15.9k1 gold badge34 silver badges46 bronze badges

Comments

Sam · Accepted Answer · 2019-06-07 09:16:27Z

Here is a working example, i have split each part into its own checker to make it easier to understand.

   let string = "Asdfsdf$32";
        let special_characters = ['$','%','^','&','*','(',')'];

        let string_array = string.split('');

        // Upper case check
        if(string[0] === string[0].toUpperCase()) {
            console.log("First letter is uppercase")
        } else {
            console.log("First letter is not uppercase")
        }

        // No numbers check
        if(string.match(/\d/)) {
            console.log("Digit Found")
        } else {
            console.log("No Digit Found")
        }

        // Special Characters
        if(string_array.find(item => special_characters.includes(item))) {
            console.log("Special Character Found")
        } else {
            console.log("No Special Character Found")
        }

Keshav Gera · Accepted Answer · 2019-10-16 06:44:40Z

0

export function checkDigit(username){

    if(username.match(/\d/)) {
        console.log("Digit Found")
        return true;
    }else {
        return false;
    }
}


       let username = this.state.name;

        if(checkDigit(username)){
            showInfoAlert(NAME_VALIDATION_DIGIT)
            return
        }

answered Oct 16, 2019 at 6:44

Keshav Gera

11.3k1 gold badge78 silver badges56 bronze badges

Collectives™ on Stack Overflow

how to check if string contains number with react

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related