Form validation before the submission and at time of the data entry - forms

Question

I started to study React and wanted to create the form for multiple inputs, where I can check the validation of the data at the time of input and again before submitting of the form.
The conditions to submit: all fields are mandatory and the data is valid.
Currently, if user enters invalid data in input field, error text is displayed near the same field. And if user clicked button "submit" on the form with empty fields, error text is also displayed.
But I can't really work it out, how should I do the validation before the submission of the form in my example: : the form has the input field with an error or not.
import React from 'react'
import { render } from 'react-dom'
const ErrorOutput = props => {
let name = props.name
let inputValue = props.case
let submit = props.submit
console.log(props.submit)
if (name === 'firstName') {
if (!inputValue.match(/^[a-zA-Z]+$/) && inputValue.length > 0) {
return <span>Letters only</span>
} else if (submit && inputValue.length === 0) {
return <span>Required</span>
}
return <span></span>
}
if (name === 'telNo') {
if(!inputValue.match(/^[0-9]+$/) && inputValue.length > 0) {
return <span>Numbers only</span>
} else if (submit && inputValue.length === 0) {
return <span>Required</span>
}
return <span></span>
}
}
class App extends React.Component {
constructor(props){
super(props)
this.state = {
firstName: '',
telNo: '',
submit: false
}
}
handleSubmit(e){
e.preventDefault()
let submit = true
this.setState ({submit: submit})
// ... Validation
}
handleValidation(e) {
this.setState({
[e.target.name]: e.target.value
})
}
render() {
return (
<form onSubmit={this.handleSubmit.bind(this)}>
<div>
<label>
First name:
</label>
<input
type='text'
name ='firstName'
value = {this.state.firstName}
onChange = {this.handleValidation.bind(this)}
/>
<ErrorOutput case={this.state.firstName} name={'firstName'} submit = {this.state.submit} />
</div>
<div>
<label>
Phone number:
</label>
<input
type='tel'
name ='telNo'
value = {this.state.telNo}
onChange = {this.handleValidation.bind(this)}
/>
<ErrorOutput case={this.state.telNo} name={'telNo'} submit = {this.state.submit} />
</div>
<button>
Submit
</button>
</form>
)
}
}
render(
<App />,
document.getElementById('root')
)

Answer 1

the following code is an example of adding data via form and form validation prior to the submit. More validations can be added.
class Form extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
age: '',
email: '',
errorName: '',
errorAge: '',
errroMail: '',
dataValue: false
};
this.getName = this.getName.bind(this);
this.getAge = this.getAge.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.postDatainDisplay = this.postDatainDisplay.bind(this);
}
componentWillReceiveProps(nextProps) {
if (this.props.name !== nextProps.name) {
this.setState({ dataValue: true });
}
}
postDatainDisplay(dataObj) {
this.props.postData(dataObj);
}
getName(event) {
const { name, age } = this.state;
this.setState({ errorName: '' });
this.setState({ name: event });
}
getAge(event) {
const { age } = this.state;
this.setState({ errorAge: '' });
this.setState({ age: event });
}
handleSubmit() {
const { name, age } = this.state;
//add more validation here
if (name === '') {
this.setState({ errorName: 'name cannot be blank', dataValue: false
});
} else if (age === '') {
this.setState({ errorAge: 'Age cannot be blank', dataValue: false });
} else
{ this.setState({ data: { name, age } }, () => {
this.props.sendData(this.state.data);
}
render() {
const { name, age } = this.props;
return (
<div className="container">
<form>
name:<input
type="text"
onChange={event => {
this.getName(event.target.value);
}}
/>
{this.state.errorName}
<br />
<br />
age:{' '}
<input
type="text"
onChange={event => {
this.getAge(event.target.value);
}}
/>
{this.state.errorAge}
<br />
<br />
<input type="button" onClick={this.handleSubmit} value="Submit"
/>
</form>
</div>

Answer 2

class App extends React.Component {
constructor(props){
super(props)
this.state = {
form:{
firstName: {
value: '',
validation: {
required: true
},
valid: false,
touched: false
},
telNo: {
value: '',
validation: {
required: true
},
valid: false,
touched: false
}
},
formIsValid:false
}
}
checkValidity(value, rules) {
let isValid = true;
if (rules.required) {
isValid = value.trim() !== '' && isValid;
}
return isValid;
}
handleValidation = (event) => {
let fieldName = event.target.name;
let fieldValue = event.target.value;
const updatedCategoryForm = {
...this.state.form
};
const updatedFormElement = {
...updatedCategoryForm[fieldName]
};
updatedFormElement.touched = true;
updatedFormElement.value = fieldValue;
updatedFormElement.valid = this.checkValidity(updatedFormElement.value, updatedFormElement.validation);
if (!updatedFormElement.valid && updatedFormElement.validation ) {
updatedFormElement.elementValidation = "Invalid";
} else {
updatedFormElement.elementValidation = "";
}
updatedCategoryForm[fieldName] = updatedFormElement;
let formIsValid = true;
for (let inputIdentifier in updatedCategoryForm) {
formIsValid = updatedCategoryForm[inputIdentifier].valid && formIsValid;
}
this.setState({ form: updatedCategoryForm, formIsValid: true });
}
Based on the value of formIsValid field disable submit button