JAVASCRIPT

react form validation with logic boolean, string and number

import React from 'react';
import './App.css';

function ValidationMessage(props) {
if (!props.valid) {
return(
<div className='error-msg'>{props.message}</div> ) }
return null;}

class App extends React.Component {
state = {
productID: [], productIDValid: false,
name: ' ', nameValid: false,
price: ' ', priceValid: false,
manDate: ' ', manDateValid: false,
expDate: ' ', expDateValid: false,
formValid: false,
errorMsg: {}
}
/*VALIDATE FORM function */
validateForm = () => {
const {productIDValid, nameValid, priceValid, manDateValid, expDateValid} = this.state;
this.setState({
formValid: productIDValid && nameValid && priceValid 
}) } // END 

/*  PRODUCT ID INPUT FIELD -------------------------------------------------------->*/
updateProductID = (productID) => {
this.setState({productID}, this.validateProductID)
}

validateProductID= () => {
const {productID} = this.state;
let productIDValid = true;
let errorMsg = {...this.state.errorMsg}

if (isNaN(productID)) {
productIDValid = false;
errorMsg.productID = 'Invalid Product ID number'
}

this.setState({productIDValid, errorMsg}, this.validateForm)
} // END 

/*  USER NAME INPUT FIELD  ---------------------------------------------->                  */
updateName = (name) => {
    this.setState({name}, this.validateName)
    }
    
    validateName = () => {
    const {name} = this.state;
    let nameValid = true;
    let errorMsg = {...this.state.errorMsg}

    if (name.length <= 4 ) {
    nameValid = false;
    errorMsg.name = 'Must be at least 3 characters long'
    }  else if (/[0-9]+/.test(name)){
        nameValid = false;
        errorMsg.name = 'Must have no Number'
    }
    this.setState({nameValid, errorMsg}, this.validateForm)
    } // END 
    
/* PRICE INPUT FIELD --------------------------------------->*/ 
updatePrice = (price) => {

    this.setState({price}, this.validatePrice)
    }
    
    validatePrice= () => {
    const {price} = this.state;
    let priceValid = true;
    let errorMsg = {...this.state.errorMsg}
    
    if (isNaN(price)) {
    priceValid = false;
    errorMsg.price = 'Invalid Product ID number'
    }
    
    this.setState({priceValid, errorMsg}, this.validateForm)
    }  // END

render() {
return (
<div className="App">
<header>
Form Validation
</header>
<main role='main'>
<form action='#' id='js-form'>

<div className='form-group'>
<label htmlFor='number'>Product ID</label>
< ValidationMessage valid={this.state.productIDValid} message={this.state.errorMsg.productID} />
<input type='text' id='username' name='number' className='form-field'
value={this.state.productID} onChange={(e) => this.updateProductID(e.target.value)}/>
</div>

<div className='form-group'>
<label htmlFor='username'>Name</label>
< ValidationMessage valid={this.state.nameValid} message={this.state.errorMsg.name} />
<input type='text' id='name' name='name' className='form-field'
value={this.state.name} onChange={(e) => this.updateName(e.target.value)}/>
</div>

<div className='form-group'>
<label htmlFor='number'>Price</label>
< ValidationMessage valid={this.state.priceValid} message={this.state.errorMsg.price} />
<input type='text' id='username' name='number' className='form-field'
value={this.state.price} onChange={(e) => this.updatePrice(e.target.value)}/>
</div>



<div className='form-controls'>
<button className='button' type='submit' disabled={!this.state.formValid}>Sign Up</button>
</div>
</form>
</main>
</div>
);
}
}
export default App;