2019-05-01+Web+Designer+UK

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>

11. Make use of new input
    With the component ready to go, we can now add it
    to the form. Redux Form’s component 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' />

12. 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