how to check if string contains number with react - reactjs

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;

Answer 1

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

Answer 2

You can use regex.
!firstName.match(/\d/)
\d checks for the numbers

Answer 3

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 });
}
}
};

Answer 4

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

Answer 5

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")
}

Answer 6

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
}