How to submit invalid form in redux-form? And is it even possible? - redux-form

Question

I have a form and 2 submit flows: draft and detailed.
There is no validation for submitting the draft.
Some of the fields are required for detailed submitting. One of them is "description".
Invalid form:
Valid form:
Validation works properly and "description" field gets marked as "invalid" if empty:
<Field
component="textarea"
name="description"
maxLength={2048}
validate={[required()]}
label={<FormattedMessage id={messageIds['entity.ticket.field.description']} />}
/>
But at the same time, I can't submit this form as "draft" when the description is empty.
Shortened code:
function TicketFormComponent(props: AllProps) {
const handleDraftTicketSubmit = props.handleSubmit((values) => {
props.onTicketCreate({
...values,
status: 'Draft',
});
});
const handleActiveTicketSubmit = props.handleSubmit((values) => {
props.onTicketCreate({
...values,
status: 'Open',
});
});
return (
<Form onSubmit={handleActiveTicketSubmit}>
<Field
component={TextInput}
name="subject"
maxLength={255}
label={<FormattedMessage id={messageIds['entity.ticket.field.subject']} />}
/>
<h3><FormattedMessage id={messageIds['entity.ticket.field.description']} /></h3>
<Field
component="textarea"
name="description"
maxLength={2048}
validate={[required()]}
label={<FormattedMessage id={messageIds['entity.ticket.field.description']} />}
/>
<Button
data-aqa="submitDraftTicket"
disabled={props.submitting || !props.initialValues.selectedTopic}
onClick={handleDraftTicketSubmit}
className={props.classes.saveDraftButton}
>
<FormattedMessage id={messageIds['entity.ticket.field.saveAsDraft']} />
</Button>
<Button
data-aqa="submitActiveTicket"
disabled={props.submitting || props.invalid}
onClick={handleActiveTicketSubmit}
variant="contained"
color="primary"
>
<FormattedMessage id={messageIds['entity.ticket.field.createNewTicket']} />
</Button>
</Form>
);
}
Expected result:
Form values are submitted with "Draft" status further through Redux flow
Actual result:
form values are not submitted, instead, I get 2 redux actions:
{ type: '##redux-form/TOUCH' }
{ type: '##redux-form/SET_SUBMIT_FAILED', error: true }

Answer 1

I'm seeing two possibles approaches:
1. Remove Field level validation (validate={[required()]}) and validate the Form with SyncValidation:
const validate = values => {
const errors = {}
const {isDraft, ...rest} = values
if(isDraft) {
// draft validations
} else {
// other validations
}
return errors
}
export default reduxForm({
form: 'myForm', // a unique identifier for this form
validate, // <--- validation function given to redux-form
})(MyForm)
2. Add the Field validation conditionally:
<Field
name="description"
validate={!isDraft && [required()]}
/>
But here you should change your submission flow. Rather than submitting the Form on 'Save draft' or 'Create ticket' buttons, you have to set a state isDraft variable firstly and later submit the form.
Otherwise, submitting the Form on a button click, the conditional Field validation won't be applied, because the Form will be already submitted.
Here, the use-case is very similar to yours. So you can take inspiration of it too.