How to validate the input mask react, that entered all the values ​​in the mask?

import React from 'react'; import InputElement from 'react-input-mask'; import { Form, FormGroup, Label, Input, Button } from 'reactstrap'; export default class App extends React.Component { constructor(props) { super(props); this.state = { password: '', phone: '', disabled: true }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(e, inputName) { switch (inputName) { case 'password': if(e.target.value.length > 5){ this.setState({ password: true }); } break; case 'phone': console.log(this.state.phone); this.setState({ phone: true }); break; default: break; } if(this.state.password === true && this.state.phone === true){ this.setState({ disabled: false }); } } handleSubmit(event) { alert('true'); event.preventDefault(); } render() { return ( <Form> <FormGroup> <Label for="examplePassword">Password</Label> <Input type="password" onChange={e => this.handleChange(e,'password')} placeholder="password" /> </FormGroup> <FormGroup> <InputElement className="form-control" mask="+7 (999) 999-99-99" onChange={e => this.handleChange(e,'phone')} placeholder="phone"/> </FormGroup> <Button color="primary" onClick={this.handleSubmit} disabled={this.state.disabled}>Submit</Button> </Form> ); } }