Add Styles that Reflect the Validity of redux-form Fields
We are going to add styling to a redux-form Field that reflect its state. For example, if a field is invalid, it will have a red background, and if it’s valid, it will show a green tick next to the field. We are going to look at how to use a Field’s meta information for fine-tuning of under what exact circumstances such feedback shows, based on how the user has interacted with the Field.
Instructor: [00:00] Let's add some styles to improve the overall look and feel of our form. Firstly, let's go ahead and add class names as a dependency. We're going to import that as cx, at the top of fields/index.js.
[00:21] This will help in adding multiple class names to one element and adding class names conditionally. Let's head over to our custom input div, and we're going to add some class names here.
[00:37] Custom input container, flex-row-reverse if our type is checkbox. Dirty if meta.dirty is true. We're going to move our label underneath our input field, because this makes it easier to target with css. To our error message, we'll remove the style prop.
[01:09] We're going to add className = feedback text error text. All these class names correspond to some css which was written earlier. Let's bring that in now. In source components, we'll add a new file, registerForm.css. I'll post in the styles now.
[01:39] We can now import this into registerForm.js. Let's save. We can see a different look of our form. The styles for validation could do with some improvements. For example, this error message should look more like an error.
[01:59] Let's head over back to fields/index.js. Inside our custom input, we're going to get a validity class name passing in our meta object. Get validity className is going to be a function.
[02:20] We're going to say, "If the field is active, then don't return any class name. If the field is touched and invalid, then return invalid as a class name. If the field is touched and valid, then return valid."
[02:56] Let's head over back to our css now, and we can write in some validation styles. For a valid input, border color can be green. For invalid input, it can be red. For error text, let's add a red background and white text.
[03:22] We'll add some spacing between the error message and the field and relative positioning. We're going to add a small triangle as a before pseudo-element. So that our error textbox is pointing at the field that it's corresponding to.
[03:47] To do this, we need to supply a content of empty string. Border color, transparent, transparent, red, transparent, width and a height of 0Border style of solid and a border width of 08 pixels, 8 pixels, 7 pixels. Absolute positioning, left, 20 pixels, and top, -8 pixels.
[04:26] Let's save and see what this looks like. We have a green border for valid fields and a red border for invalid fields, with a blatant error message underneath. This pseudo-element in our css is causing our triangle to appear.
[04:52] It can be quite intrusive for this error field to continuously show as we're entering data into the form field. If we want to wait until the user's finished entering their data into the field, we can just head over back to our fields, and we'll only show the error message when the field is not active. Now, our error won't show up when the field is active.