React Native and Forms: Part 2
Wrapping up series with validation, submission, and resetting forms.
This article is part of a series starting with React Native and Forms: Part 1.
Validation
In this next example, we want to ensure that both the first and last name fields are not empty and not blank (only spaces) before one can submit the form; observe the disabled button.
We also want the first and last name fields to highlight red with an appropriate error message after the user has interacted with the field (touched) and it is still empty or blank (only spaces).
As before, we start by copying the SimpleForm folder to a ValidationForm folder (renaming the components as appropriate) and adding to App.js.
We, next, update the RFTextInput component; accepting and using some additional Redux Form properties (from Field); we also make some styling changes. These changes implement the field-level validation behavior.
components / RFTextInput / index.js
Observations:
- In order for Redux Forms to determine if a field has been interacted with (touched), we need to pass input.onBlur and input.onFocus to the TextInput
- meta.valid indicates if the field has an error or not
- meta.touched indicates if the field has been interacted with
- meta.error is the specific error message (if there is one)
- These changes have no impact on SimpleForm as it does not have any validation rules
components / RFTextInput / styles.js
In order to implement the form-level validation behavior we use the Redux Form provided valid property to conditionally disable the submit button.
components / ValidationForm / ValidationFormRF / ValidationView / index.js
Now that we have implemented all the view-level changes for validation, we implementation the validation logic.
components / ValidationForm / ValidationFormRF / index.js
Observations:
- The validate function is called on every interaction with the form, e.g., as one enters information into a field
- The validate function’s return object indicates which errors exist; keys are the field names and the values are the error message
Submission
Often the form submit handler is asynchronous and takes awhile to complete. In this situation, a common pattern is to disable the form elements until the submission is complete.
It is also common to provide a message on success or failure.
This is getting a bit old, but… We start by copying the ValidationForm folder to a SubmissionForm folder (renaming the components as appropriate) and adding to App.js.
We need to define a disabled state in the RFTextInput component.
components / RFTextInput / index.js
Observations:
- As we want to ensure this component works with the earlier example, we make disabled an optional property but set its default value to false.
- With React Native TextInput, we implement a disabled state with two properties: editable and selectTextOnFocus
We then we define a disabled, success, and failure state in SubmissionFormView; applying a little styling for clarity.
components / SubmissionForm / SubmissionFormRF / SubmissionFormView / index.js
Observations:
- Redux Form provides the submitFailed, submitSucceeded, and submitting properties; based on the result of your submit handler (below)
- Apparently, submitting is optional (feels like a bug to me); so we have to set a default value of it to false
components / SubmissionForm / SubmissionFormRF / SubmissionFormView / styles.js
We finally create an asynchronous submit handler (just waits three seconds).
components / SubmissionForm / SubmissionFormRF / index.js
Observations:
- For asynchronous behavior, Redux Form expects the return value of the submit handler to be a promise; thus can detect that it is pending, succeeded, or failed
- By the way, async functions return promises
- In order to demonstrate the failure situation, simple uncomment the line throwing an error; in this case the async function will return a rejected promise
Resetting
Finally, it is common to reset the form after a success.
For the last time… We start by copying the SubmissionForm folder to a ResetForm folder (renaming the components as appropriate) and adding to App.js.
The one bit of complexity is that we want to reset the form from the submit handler (where the submission logic is). At the same time, the submit handler is high up in the component tree (away from the form). Luckily, Redux Form provides a solution (using a Redux action creator).
note: If you are unfamiliar with Redux, you can simply copy and paste your way through this.
As we are using Redux, we need to connect our ResetForm component tree to it. We do this by inserting a new component at the top of the tree.
Observations:
- We create a new component ResetForm (and folder) and place the existing three components underneath it
- We rename the old ResetForm component to ResetFormSubmit (named as it provides the submit handler)
We implementation of ResetForm is a simple connect to Redux component (provides the reset function).
components / ResetForm / index.js
Now we use the provided reset function to reset the form after a successful (not failed) submission.
components / ResetForm / ResetFormSubmit / index.js
Wrap Up
As we have covered the most common form usage scenarios, you are should be prepared for you project involving a form. If not, Redux Form does provide examples of other (less common) scenarios.
