When we add a new article were validating the data on the server in P HP.
If there are any errors in the data we put in the farm for example an empty title.
Our content like this then the form is read displayed with the error messages we have to send back the
entire page to the browser.
If there are any validation errors.
We saw earlier on how we can do basic client side validation.
Using H to email attributes such as required but validation using h.t. email only is quite basic.
Using javascript to validate the farm provides a much better user experience.
We could write code in vanilla javascript but as we're using J query we can use the j query validation
plugin which is very powerful and has many features to install the plug in.
We can download it.
Ah we could include it on a C D n just as we did with the J query library.
Let's load it from a c d n.
Adding the script reference in the footer after the J query library because it depends on this and before
our own script file then in the article form will add an idee to the font tag.
So we can identify the farm element.
To validate a form we call the validated method on the farm elements passing in various validation options.
So first let's get the farm element based on the I.D. We just added and call the validated method on
it passing in no real validation rules.
The plugin includes several validation methods for example far required fields for validating minimum
and maximum length email addresses and so on.
It's also possible to add custom validation methods if necessary.
So on our farm the title field is required and also the content field.
The published at field isn't required but we do want it to be a valid date and time.
There isn't a built in validation method in the plugin for this so we could add one using the add method
function and then using the date pass method of javascript which parses a string representation of a
date and time.
Without going into this in too much detail this method might look like this.
We add a new validation method called Date Time.
And this will return true if the value is empty.
Ah.
Also if the value returned from the date does pass method is a valid value.
Then when we validate the form we can use this method like that.
Now if I try and submit an invalid form we get validation messages after each field.
Note that the farm hasn't been submitted and nothing has been sent to the server.
If I provide a value for one of the fields.
The validation message goes away.
This is where the jaquie revalidation plugin provides a better experience than validation with HDMI
attributes.
In addition to showing all the validation messages at once instead of one at a time as the validation
messages are corrected the fields are validated immediately.
The custom validation method we added further published at date allows an empty field.
But if I add an invalid value.
We get the validation error message if I correct this.
The field is valid when we have no validation errors.
The plugin lets us submit the farm.
Now the date does it pass function will allow some date time strings that the server side cold will
consider to be invalid.
So it's not an ideal solution.
However it's not worth fixing here because later on we'll add some controls to the farm so that a date
and time can be selected from a calendar so it won't be necessary to type in an exact date time string.
Even though we've improved the user experience by validating the farm in the browser it's important
to keep the server side validation as client side validation can easily be bypassed for example by switching
off Javascript in the browser.