So what could we do about validation.
Well maybe let's start at the desired end result.
My idea is that we later have some validated function which doesn't exist yet but that we later have
it to which I pass to to enter title or actually a configuration object.
I'd say where the value is to enter title.
So the thing to be validated but where I then also have additional properties that tell the validate
function how to validated.
So for example that we have required such a true here Min length set to five to enforce five characters
and so on.
And then we do this here for all three inputs and validate is a function that returns true if it's valid
and false if it's not valid.
And in the end we could then have something like this for entered description and entered people that
would roughly be the idea.
Of course it's just one way of implementing this but it's a way which I like quite a lot for that at
top at the top of the file.
I will add some validation logic.
And again there are many ways of doing this.
I will first of all start by defining the structure of such a valid data bill object.
So if this object we pass to the validate function because of course does always needs to have a similar
structure with a certain amount of properties which can be there and certain types of properties so
that the validate function actually knows what it's working with and can correctly extract properties
and so on.
So I will start by defining an interface.
We could also go for a custom type totally up to you since all the flight and structure of an object.
I'm always a bigger fan of defining just as well an interface I'll name it valid date table here because
it describes a valid database object and it will have a value which is should be a string or also a
number.
Will have a required prop which will have a boolean value so true or false and then let's say we support
Min length validation which should be a number max length which should be a number and also in case
we're getting a number of men and a max value difference to mean length and max length is that this
checks the length of the string.
This the value of the number if it's above a certain number or below a certain maximum.
These are the properties I want to support now besides the value.
This should all be optional though which we can and forest by adding a question mark after the names
by the way the alternative to using a question mark is to allow for undefined values.
The question mark basically does the same.
It SAS is required is either a boolean or undefined.
So now we have to validate able interface.
What can we do with that.
Well now with that interface created we can create that function that validate function I'm looking
for that should get such a valid database object so valid data all input is of type validated Bill.
That's my idea here.
So it gets an object which has this structure and now in there we can check for all these properties
to exist and then do the appropriate validation.
Now what exactly do we do in the validate function day for.
Well in the end here I want to create a variable is valid which initially is true.
So the default assumption is what we get is true.
But it will set it to false as soon as at least one of our checks fails.
And now let's start with the first check.
Let's see if the valley database input here.
This argument we're getting if dad has required prop if that's not on the flight.
If this is set and if it is true therefore this means that the value is required and must not be empty.
So now in here we can set is valid equal to is valid and the way javascript works does ensures that
the new value of is valid will be false.
If the thing after and is false because if at least one of the two things is false the overall value
will be false.
Now is valid initially is true but if the thing after D logical and operator is false is valid will
be false and in the end that will return is valid.
So now what do we add after dy Q And percent symbol stage 4.
Well I want to check if validated label input value.
If that is empty and for that we can trim it and check the length.
Or can we.
Well the problem is we don't know if value is a string.
It's a string or a number.
So it's not guaranteed to be a string and therefore the trim method is not always available.
There are various ways of working around that.
We could add a type guard we could check if type of validated all input value equals string and only
perform this check if it is but actually that would be a bit redundant.
What we can do here is very simple.
We can simply say well converted to a string if it was a number now it's a string again.
If it was a string nothing changed.
And with that we're doing this now I just need to add my check here and check if that is sero or to
be precise.
If it's not 0 so if it is not 0 then this will return true and is valid stays true if it is 0.
So if it is of length 0 if it's empty desert return false and therefore is valid will become false and
we're only checking this if the required check is flecked with setting required to true.
That's the first check I want to perform here it's not the only one of course we can't continue and
check if valid data input Min length is set min length is set then this string which would get should
have a certain minimum length important the string should have a certain minimum length we don't care
about numbers here we're not checking for a minimum value of a number.
So here we can actually add a type card we can incorporate it into this check and check if type of validated
will input value is equal to string.
If it's not we don't need to go into does it check because then there is nothing to check if our value
is a number we don't care about this.
If we set a min length for a number we basically skipped his check because it doesn't make much sense.
If we do have a string though and middle length is set then I want to set is valid.
Equal to is valid.
And then again our check and the check here is whether validated.
Input dot value which we know is a string at this point here.
Length is greater than valid able input Min length so greater than the value which was defined here.
Now we have one potential problem here though and do see which one that could be.
This should generally work but it will fail if Min length is set to zero.
The intention of the developer setting it to zero is probably not to skip this check but to check whether
we do have the minimum length of zero.
Well arguably it's a redundant check because it's basically checking whether we do have anything at
all which we already do with the required check.
So it's not a huge problem.
Still if we want to be super secure here we should actually check if validate the input Min length is
not equal to undefined or not equal to null with one equals sign.
This includes now and undefined.
That's how Charlie's good works.
This is a bit safer because now we make sure we always run this check.
Even if Min length is set to zero which is a false value.
Again you could argue if it makes sense because it's basically the same check us as up there but still
here want to perform it.
So that's the min length.
Now I'll copy this and basically do the same for max length.
So max length here is also checked also here and also only 4 strings and of course he would just have
to revert as we want to make sure that the length of the value which is provided is below our max length
well and now we get two more checks left for a min and max value which only makes sense for a number
so here I will add an average check and check if validator will input Min is not equal to now.
Again I'm not just checking for truthiness because Dad would have problems with a value of zero and
then I'll check if the type of validated input value is equal to number because I see not much sense
in checking this for a string.
If you want to check it for a string of course you can't admit this then you just have to make sure
you convert the value to a number when you use it in the check we're about to write to check we're about
to write again uses the old value of is valid and combines it with a new check to then store it back
in is valid and the new check should now well incorporate our number and check whether it's bigger than
the min value.
So here I'd check if Valley database input value is greater than valid database input Min.
And now we can repeat does for Max.
So here we need Max.
And here we all need Max and we need to change this here to a smaller than symbol with that we're checking
all the different scenarios we could have here.
And we're returning is valid now we just need to create objects that adhere to this interface to then
send them to the validate function for that.
Let's go down to project input and there in gatherer user input.
I want to construct my validated objects side note besides an interface of course.
We could have also created a class here.
Then we could instantiated with the new keyword but all differ practice and demo purposes here.
I want to show how this works with an interface.
So here we have our tidal Valley data bill which should be of type validated bill and that of course
is an object which needs to have a value property and that's our entered title.
It doesn't need any other properties but I want to check whether it's well not empty.
So we'll set required to true and then we can copy that and repeat that for the description and for
people.
And here we have the description which Steve entered.
Description I mean here we have to entered people to be precise here one to have a number.
So I convert this to a number with a plus symbol all should be required but then also here let's say
the description should have a mean length of five characters.
And for the people the minimum should be 1 so that we have at least two people assigned by the way it's
up to you how you implement this of course in your validation logic you could also check for greater
equal smaller equal if you like to same forward a length of course greater equal smaller equal.
That's all the possible.
Actually I will keep these changes.
So now we have the minimum of one person assigned and a max of five.
Now we have these free validated all objects and now you're to the validate function we pass our title
validated all to the second function call.
I pass the description validated bill and to the third function call.
I pass people validate bill and now validate should return true if they're all valid and false otherwise.
So now I want to check if at least one of them fails by checking if these are all false by adding an
exclamation mark in front of it to check if D's fault or D's falls or desist falls and if at least one
of them is false.
So if at least one of the validate function calls returns fault we'll make it in there and show the
alert we'll end with that out of the way to all the tests.
I'll go to index H to M. because they're on the input for people.
I actually allow a maximum of 10 and a minimum of zero.
So in the input we technically can enter invalid values on purpose of course so that we can test our
logic and therefore for now let's save it all compiles without errors.
Let's now give it a try if I click at Project I get an error which is good.
Now let's enter test here still get an error let's enter test here and five here and I still get an
error because my description is too short.
If I enter one more character I do have them in length and I can create this.
So now let's enter let's say minus one people and.
Well OK H two doesn't support does but let's enter 0 or 6 and we get errors and only five entries something
between 1 and 5 it works.
So that seems to work as it should.
And that's pretty good.
And that's of course just one way of implementing validation but a way which actually is now quite reusable
could be used like this in different parts of the app as well.
And of course that takes advantage of TypeScript and offers us great support and type checking to a
white unnecessary mistakes.