Здравствуйте, подскажите пожалуйста, как прикрутить код js валидации чтобы работал
вот ссылка на bootstrap
bootstrap-4.ru/docs/4.2.1/components/forms/#validation// ВОТ ЭТОТ КОД НИЖЕ НУЖНО ВСТАВИТЬ В REACT
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
Это класс React
class SignUp extends Component {
apiClient = new ApiClient();
constructor(props) {
super(props);
this.state = {
name: '',
email: '',
phone: '',
photo: '',
selectedId: -1,
positions: [],
mask: '999999999',
errors: {
errorName: '',
errorEmail: ''
}
}
this.getListPositions();
handleName = (e) => {
this.setState({
name: e.target.value
});
};
handleEmail = (e) => {
this.setState({
email: e.target.value
});
};
handlePhone = (e) => {
this.setState({
phone: e.target.value.replace(/[{()}]/g, '').replace(/\s/g, '')
});
};
handleChange = (e) => {
this.setState({
selectedId: e.target.value });
};
}
_isNameValid=(name)=> {
let errorName = '';
if(name === '') {
errorName = 'Поле не может быть пустым';
this.setState({errorName});
return false
}
if(name.length < 2) {
errorName = 'Длинна должна быть не меньше 3х символов';
this.setState({errorName})
return false
}
this.setState({errorName})
return true
}
_isEmailValid=(email)=> {
let errorEmail = '';
if(email === '') {
errorEmail = 'Поле не может быть пустым';
this.setState({errorEmail})
return false
}
this.setState({errorEmail})
return true
}
isFormValid =()=>{
return this._isNameValid(this.state.name) && this._isEmailValid(this.state.email)
}
postHandler = (e) => {
e.preventDefault();
if(this.isFormValid()) {
console.log("form")
}
}
render() {
return (
<section id="sign-up" className="sign-up">
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<HeadlineH2 title="Lorem ipsum"/>
</div>
</div>
<form action=""
className="form needs-validation"
onSubmit={this.handleSubmit} noValidate>
<div className="row justify-content-center">
<div className="col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div className="form-block">
<input type="text"
id="validationCustom01"
className="form-control"
onChange={this.handleName}
value={this.state.name}
errors={this.state.errorName}
placeholder="Your name"/>
<span className="form__desc">Name</span>
{this.state.errorName}
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div className="form-block">
<input type="email"
id="exampleInputEmail1" aria-describedby="emailHelp"
className="form-control"
value={this.state.email}
placeholder="Your email"
onChange={this.handleEmail}
errors={this.state.errorEmail}
required/>
<span className="form__desc">Email</span>
{this.state.errorEmail}
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div className="form-block">
<InputMask mask="+380 (99) 999 99 99"
placeholder="+380 (__) ___ __ __"
maskChar={'_'}
value={this.state.phone}
id="phone"
className="form-control"
name="phone"
onChange={this.handlePhone}
beforeMaskedValueChange={this.beforeMaskedValueChange}
/>
<span className="form__desc">Phone</span>
</div>
</div>
</div>
<div className="row">
<div className="col-xl-6 col-lg-6 col-md-6 col-sm-12 ">
<div className="form-block">
<select
id={this.state.selectedId}
value={this.state.selectedId}
onChange={this.handleChange}
className="form-control form__select"
>
<option disabled value='-1'> Choose a position </option>
{this.state.positions.map((item)=>{
return (<option value={item.id} key={item.name}>
{item.name}</option>)
})}
</select>
</div>
</div>
<div className="col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div className="form-block">
<fieldset>
<input type="file"
id="file"
className="form__input form__input--file"
value={this.state.photo}
onChange={this.checkSize}
required/>
<label className="input__label" htmlFor="file">Upload</label>
<label className=" input__label--file" htmlFor="file">
<span className="icon-upload"></span>
</label>
{this.state.photo === '' ? <span id="file-name"
className="file__name">Upload your photo</span> :
<span id="file-name" className="file__name">
{this.state.photo.replace(/\\/g, '/').split('/').pop()}</span>}
{/*<span id="file-name" className="file__name">Upload your photo</span>*/}
</fieldset>
</div>
</div>
</div>
<div className="row justify-content-center">
<button type="submit" onClick={this.postHandler} className="btn btn-gray">Sign Up</button>
</div>
</form>
</div>
</section>
);
}
}
export default SignUp;
Средний