在某些表单字段上进行React-final-form触发器验证

Question

I want to validate specific fields on some action.

I have a form with multiple fields and inside form, there is a section containing 4 fields and a separate button like Test connection . So, on pressing that button I want to send an API call but before that, I want to show validation errors on those specific fields. I could not find a way to do that. If you guys know, let me know. Thanks in advance.

 <Form onSubmit={handleSubmit} initialValues={initData} render={({ handleSubmit, form, submitting, pristine, values, }) => { return ( <form onSubmit={handleSubmit}> <div className="form-body"> <h2>New Data Source</h2> <FormGroup> <Label for="name" sm={3}> Name </Label> <Col sm={6}> <Field name="name" placeholder="Name" innerRef={dataSourceNameRef} aria-label="name" component={FormInput} validate={composeValidators(isRequired)} /> </Col> </FormGroup> <div className="grey"> <Row> <Col xs={12} sm={6} md={4}> <FormGroup> <Label for="name">Hostname</Label> <Field name="hostname" placeholder="Hostname" aria-label="hostname" component={FormInput} validate={composeValidators(isRequired)} /> </FormGroup> </Col> <Col xs={12} sm={5} md={2}> <FormGroup> <Label for="port">Port</Label> <Field name="port" placeholder="Port" aria-label="port" component={FormInput} validate={isRequired} /> </FormGroup> </Col> </Row> <Row> <Col xs={12} sm={6} md={4}> <FormGroup> <Label for="name">Username</Label> <Field name="username" placeholder="Username" aria-label="name" component={FormInput} validate={isRequired} /> </FormGroup> </Col> </Row> <Row> <Col xs={12} sm={6} md={4}> <FormGroup> <Label for="name">Password</Label> <Field name="password" placeholder="Password" aria-label="password" type={values.showPassword ? 'text' : 'password'} component={FormInput} validate={composeValidators(isRequired)} /> </FormGroup> </Col> <Col xs={12} sm={6} md={4} className="checkbox-field"> <Field name="showPassword" aria-label="show password" component={FormInput} type="checkbox" label="Show Password" /> <Label for="name"> Show Password</Label> </Col> </Row> <Field name="testConnection" validateFields={['username', 'hostname', 'password']} component={() => ( <Button color="secondary" onClick={() => testConnection(values)} > Test Connection </Button> )} /> </div> </div> <div className="form-footer justify-right"> <Button type="submit" disabled={submitting || pristine} color="primary" > Create </Button> </div> </form> ); }} /> 

Answer 1

Basically, you just have to run your validation and only run the API call if your validations pass. There's an example below, but it would be great if you could share your code to help others understand where you're at.

const handleCick = () => {
  if (invalid) {
    setInvalidPopup(true);
    return;
  }

  //fetch...
};