[英]How can I check when all of the required fields of a form has been filled out?
So I have a form where I am validating it with merely with HTML5. 所以我有一个表单,我只用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.
所以我想知道如何处理React,检查这些字段是否为空。
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. 我正在使用react bootstrap,但我没有使用任何验证方法。
So I need to do is something like: 所以我需要做的是:
const checkFormValidation = () => {
if (form has all of its inputs filled out) return performSomething.
}
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.. 并在您调用的handleNextFunctionality方法中调用isRequireEmpty点击..
I mentioned this this.props.personStore.person.firstName
which can be different according to your rest of code. 我提到了
this.props.personStore.person.firstName
,根据你的其余代码可以有所不同。 I used mobx for state management. 我用mobx进行状态管理。
PersonStore look something like this. 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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.