How can I check when all of the required fields of a form has been filled out?

Question

So I have a form where I am validating it with merely with HTML5.

I have some fields that are required and just don't. So I would like to know what can I do with React, to check if those fields are not empty.

Like this is the form:

<form className="step-three-form">
        <Container className="step-one">
          <Row>
            <Col md={{ span: 6, offset: 3 }}>
              <FormField
                type="text"
                label="First Name"
                isRequired="required"
                controlId="firstName"
                placeholder="First Name"
                onChange={e => {
                  startupThirdStepFormActionHandler({
                    firstName: e.target.value,
                  });
                }}
                value={startupThirdStepForm.firstName}
              />
              <FormField
                type="text"
                isRequired={false} // THIS IS NOT REQUIRED.
                label="Middle Name"
                controlId="middleName"
                placeholder="Middle Name"
                onChange={e =>
                  startupThirdStepFormActionHandler({
                    middleName: e.target.value,
                  })
                }
                value={startupThirdStepForm.middleName}
              />
              <div className="choose-profile-separator">
                <PrimaryButton
                  type="submit"
                  btnText="NEXT"
                  primaryBtnClasses="form-button"
                  onClick={handleNextFunctionality}
                  isDisabled={areFieldsFilledOut()}
                />
              </div>
            </Col>
          </Row>
        </Container>
      </form>

I am using react bootstrap but I am not using any of its validation methods.

So I need to do is something like:

const checkFormValidation = () => {
  if (form has all of its inputs filled out) return performSomething.
}

Answer 1

Its hard to give precise answer without looking rest of the code.

This is normally we do it.

this.isRequireEmpty = () => {
      if (this.props.personStore.person.firstName === '') {
        return true;
      }
      return false;
    };
  }

and call isRequireEmpty in handleNextFunctionality method which you are calling on click..

I mentioned this this.props.personStore.person.firstName which can be different according to your rest of code. I used mobx for state management.

PersonStore look something like this.

import {
  configure,
  observable,
  decorate,
  action,
} from 'mobx';

configure({ enforceActions: 'observed' });

class PersonStore {
  constructor() {
    this.person = {
      firstName: '', 
      Lastname: '', 
    };
    this.setPerson = (property, value) => {
      this.person[property] = value;
    };

  }

  async addPerson() {
    // some functionality to call add api
  }
}

decorate(PersonStore, {
  person: observable,
  setPerson: action,
});

export default PersonStore;