时间戳

首页 > 解决方案 > 我如何检查表格的所有必填字段是否已填写？

javascript - 我如何检查表格的所有必填字段是否已填写？

问题描述

所以我有一个表单，我只用 HTML5 来验证它。

我有一些必填字段，但没有。所以我想知道我可以用 React 做什么，检查这些字段是否不为空。

像这样的形式：

<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>

我正在使用 react bootstrap，但我没有使用它的任何验证方法。

所以我需要做的是：

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

标签： javascriptreactjsecmascript-6

解决方案

如果不查看其余代码，很难给出准确的答案。

这通常是我们做的。

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

并在单击时调用的 handleNextFunctionality 方法中调用 isRequireEmpty ..

我提到了这一点this.props.personStore.person.firstName，这可能会根据您的其余代码而有所不同。我使用 mobx 进行状态管理。

PersonStore 看起来像这样。

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;

推荐阅读