React ignore required on form input-CodePudding

I try to validate the form input so that you can't submit the form without completing the description text input

<input placeholder="Description" type='text' name="description" className="form-control" value={this.state.description} onChange={this.changeDescriptionHandler} required />

But when i submit the form, it let's me submit it with the empty input, even though i specified "required". What could be the problem?

PS, State looks like this


this.state = {
            description: '',
            name: '',
            birthDate: '',
            gender: 'MALE'
        }

and the submit

saveCasefile = (e) => {
        e.preventDefault();
        let patient = { name: this.state.name, birthDate: this.state.birthDate, gender: this.state.gender }
        let casefile = { description: this.state.description, patient: patient };
        CaseFilesService.createCasefile(casefile).then(res => {
            this.props.history.push('/');
        })
    }

CodePudding user response：

There definitely needs to be more code with this question. It is possible that your initial state has some sort of value in it, and that is being passed.

CodePudding user response：

set the condition in submit handler function.

if(this.state.description !== ''){ .... }