Capture visitor data withReduxForm
‘validate’functionaspartofthesetupto
theform.
export default reduxForm({
form:'user',
validate
})(User);
13 .Definerequiredrule
Thefunctionreceivesthevaluesfromtheformas
anargument.Wecancheckthevaluesandapply
somerulestowhattheyshouldbe,andreturnan
objectcontaininganyviolationsusingthefield’s
nameasthekey.
Checkthenamefieldandreturnanerrorif it isn’tset.
export constvalidate = values=> {
consterrors = {};
if (!values.name){
errors.name = 'Required';
}
returnerrors;
};
14 .Showvalidationerror
The<Field>componentpicksuptheerrorfromthe
validationfunctionandpassesit tothecomponent
asan‘error’prop.Wecanthenshowthistotheuser
sotheyknowwhytheycan’tsubmittheform.
Backinsidecomponents/presentational/
TextInput/TextInput.jsaddtheerrorunderneaththe
input.Checkif thefieldis invalidfirstusingthe
‘invalid’booleanpropalsopasseddown.
Add a generic input inside the component at
components/presentational/TextInput/TextInput.js.
<label className={`text input__label`}>
{label}
<input
className={`text input__input`}
onChange={onChange}
type='text'
value={value}
/>
</label>
- Make use of new input
With the component ready to go, we can now add it
to the form. Redux Form’scomponent takes
care of much of the heavy lifting, including passing
the ‘onChange’ and ‘value’ props.
Back inside components/form/User/User.js,
replace the existing input – label included – with the
custom component.
<Field
label='Username' name='name'
component={TextInput} type='text' />
- Setup validation
No user can be without a username. We want
to catch when the user tries to submit the form
with a blank field. Redux Form takes a validation
function that is constantly checked every
time the values change. It provides any error
messages that we need to show. Add the
Formvalidationis usefulwhenperformed in the right
way.Havingfeedbackdisplayedoneachkeystroke
can distract the user rather than aid them. Similarly,
waiting until submission can be too late if the form has
many fields that may need correcting.
It is generally better to wait until the field loses
focus before displaying any issues. For smaller forms
such as a log in, it may be more efficient to wait until
the user submits.
Most importantly, any validation should be clear
as to what the user must do to fix it. For complex rules,
such as an enforced password strength, the displayed
error could show more granular detail that is updated
on each keystroke.
With Redux Form, validation is constantly
happening whenever the content changes. We can
decide the conditions on which to show it to the
user — whether that is on blur or on submit.
When is best to validate?
Tutorials
constshowError = invalid;
[...]
{showError && <spanclassName='
text input__error'>{error}</span>}
15 .Hideerroruntiltouched
If werefreshthepage,wecanseethefieldalready
says‘Required’eventhoughwehaven’thada
chancetoaddanythingtoit yet.Weshouldwait
untilthere’ssomekindofinteractionfirst.
ReduxFormprovidesa selectionofstatusprops
totheinputcomponentalongside‘invalid’,including
‘dirty’,‘visited’and‘touched’.Thesecanallbeusedto
signifyinteraction.
Updatethe‘showError’checktoseeif thefield
hasbeentouched.
constshowError = invalid&& touched;
16 .Enabletouchedprop
Bydefault,ReduxFormwillnotmarkanyfieldas
touched.Weneedtodefinewhat‘touched’means
beforeit hasanyeffect.
Add‘touchOnBlur’totheformsetupinside
components/form/User/User.js.Theotheroptionis
‘touchOnChange’,whichwillonlymarkit astouched
assoonasthefieldvalueis updated.
exportdefault reduxForm({
form: 'user',
touchOnBlur:true,
13
14
tutorial _________________________________________________ 75