In the last section we made use of the Medhat property that is being passed to every one of our survey
fields to get some validation message to show up on the screen.
However the validation still looks pretty ugly.
So let's tackle that to start.
There's two things or maybe three things.
Let's say three things that we should probably take care of in in here.
First off there's a real big gap between the actual input and the Validation Text.
There's probably not enough of a gap between the Validation Text and the label for the next field.
And then in addition the validation testing text itself should really appear as read to catch the users.
So I think that to address this we can wrap the error message that we're showing right here inside of
a DIV tag and add some styling or a class name to the div.
We'll first take care of making sure that the text appears with the correct color of red by adding a
class name of red dash text next we can fix some styling of this thing and make sure that it has more
space underneath it.
By adding on a style of margin bottom of 20 picks.
So it's going to put some space right underneath it.
And then finally we'll make sure that there is not too much space above it by decreasing the amount
of margin that the input tag has to be clear all that extra space in there.
That's all coming is Marjan from the input itself.
So we're going to shrink down that margin on the input input.
We'll add on the style as well with margin bottom and we'll give it 5 picks.
So that still has a little bit of standoff.
Let's see how that looks.
OK.
So we refreshed now
and then as soon as the form loads up we're going to submit it again.
And it looks way more reasonable than before.
That's looking pretty good.
So I'm pretty happy with this.
I think that we can now go back to our validation function and add in a little bit more validation for
all the other fields as well.
Now the other fields in some cases are really straightforward but in some cases a little bit more complicated
logic.
So the Servi title really the only thing I care about here is that a title is provided for all I care.
Our users can put in absolutely any text that they want to use.
And really the same thing for the subject line in the email body.
Really all I care about is that the user provides some subject line and an email body.
However remember the recipient list right here is a list of e-mails that we are going to attempt to
e-mail.
So I really want to make sure that the user is providing a well formatted list of emails and that each
individual e-mail is properly formatted as well.
So the first three fields are really pretty straightforward.
But we're going to do a little bit of thinking on how we treat the recipient list here.
Now to add in additional validation rules we're going to go back to the validate function inside of
our survey form component inside of survey form and I'm down inside of the validate function right here.
So again we can really just check all the other values on this values object or the values argument
they passed in and just make sure that the user provided a value.
We really don't care about anything else besides that.
So we can say if no values Daut and we got to remember our property names because we make sure to make
sure we get those right.
So we care about the title subject body and emails.
So if the title if the subject is not provided ersatz subject is you must provide a subject
X and then if values dot body is not provided so body ersatz body equals you must provide a body.
And you know what.
After writing those three it's really clear that this is going to be pretty repetitive right here.
I'm already tired of writing out these if statements.
And so just like we did earlier where we factored all those different fields into a single loop.
My mind is immediately thinking that we can probably do this in a little bit more clever fashion than
what we are doing right now.
So I'm going to suggest that we iterate over the fields object again because this lets out all the different
fields that we have.
We should look at each of the different objects specifically the name property we should use the name
property to reference that airs or seeing the values object and if it doesn't have a value then we should
add some note to the heirs object.
OK.
Now this time around we're not going to be using a map function because we're not trying to return a
list of anything we're trying to modify that airs object.
So this time around we will be using a Each loop.
We're going to say for each field we have run this little validation rule.
OK.
So I'm going to delete everything we have right now because that's all a bunch of just repetitive logic
and we're going to instead use the load ash library again to iterate over that field's object.
Now the each loop works very similarly to the map.
So for every field inside of the fields array we're going to run this arrow function right here will
be passed in the object or the fields from the fields array and we can reference the name property on
there to look at the Values object.
So let's see what this looks like in practice.
Now I can already tell you I don't need the entire field object.
I only really care about the name on each field.
So again we'll do some destructuring to pull off just the name.
Now to look and see if the values object contains a value for the property name.
We can say if there is nothing at values square braces square brackets whatever you wanna call it name
then run the code inside of here.
Now people sometimes get a little bit confused about this.
Remember this is going back to like javascript 101 to reference a property on an object like on the
fly or to figure out the property name.
At runtime we use the square brackets.
So if we just said values not name that we would be looking up specifically like just the name property.
Like literally the string name on the values object.
So I mean like name equals you know whatever right here.
And we don't care about anything called name.
We want to figure out the key that we're trying to look at every single time that we run through this
loop.
So instead we use the square brackets syntax right here to say hey on the fly we're going to figure
out what value or what property on the values object we're trying to look at.
OK.
So again if this property doesn't have a value assigned to it we're going to add one to the heirs object.
So we're going to say on the air object on the Name property or you know whatever it is that this current
iteration through the loop we're going to provide some error message.
So now that we have this kind of each syntax here we don't really have as much control over really customizing
the error message quite as easily.
So we're going to put on a little bit more custom error message or still be a little bit more generic
error message and just say something like you must provide a value like so.
Now I do want to say if you want to customize the error message is being provided for each individual
field.
One option that you could take and I'm just going to throw this out there you could go back up to the
fields object and you can say like you know no value air or something like that and then assigned to
it a string of provide a survey title and then down inside of the for loop we can set the no value error
value on there.
So we'll take in no value air and it will say rather than using the super generic string use the error
message that I customized for this very particular field.
So I just want to run out there you can really take this entire approach.
A lot of different directions.
It can easily be customized to fit whatever it is you're trying to do.
But for me I'm pretty happy with just a very generic error message.
So I just undid all those last couple lines I wrote.
OK.
So here we go.
We are now validating each value and making sure that has been provided.
Well that's not really enough for that e-mail recipients list.
Remember we had said that this has to be a list of emails.
They probably have to be separated by like some special character like a comma or something like that.
And then every e-mail we need to make sure is valid.
So let's take care of that in the next section.
Right now we can just test out our form by clicking into each field and then clicking out.
And you'll notice that each one says you must provide a value.
If we go back and out of value then the air immediately goes away because we've satisfied the validation
logic.
OK.
So I think this is looking good.
Let's take a break.
When we come back we're going to tackle validation on our e-mail list.