This episode is going to serve as a starting point for next few episodes where we will be doing sorting, searching and pagination. That is why this episode is so long. I promise the next few episodes will be much shorter.

As you know we already did [Frontend Filters](http://watch-learn.com/video-tutorials/making-websites-october-cms-part-39-frontend-filters) two episodes ago, and now we are doing the same thing, but this time we will be using Octobers Ajax framework so that our page does not need to refresh every time we want to filter out some data.

To achieve this we will be using HTML, CSS and of course PHP and just a pinch of JavaScript and jQuery.

In this episode we are going to use Octobers Ajax framework to filter our movies by genre and year.

Ajax Frontend Filters

So as it turns out we already get every thing set up for creating success and error messages. If you don't have it set up on your machine you must first learn how to [make a contact form](http://watch-learn.com/video-tutorials/making-websites-with-october-cms-part-18-creating-contact-form) and then learn how to [validate it](http://watch-learn.com/video-tutorials/making-websites-october-cms-part-25-new-ajax-form-validation). 

If you got all of that set up then we just need to add a bit of styling and JavaScript magic to make all this work. As you will see it is very easy.

In this episode of Making websites with October CMS I'm going to show you how to create success and error messages for your contact form.

Success and Error Messages in Forms

### UPDATE: [There is a much better way to do Ajax Form Validation](http://watch-learn.com/video-tutorials/making-websites-october-cms-part-25-new-ajax-form-validation)

Although I planned to continue doing what we did in the [last episode](http://watch-learn.com/video-tutorials/making-websites-with-october-cms-part-21-users), I decided to make this quick video about validating our forms with Ajax.

Our previous version of validation, validated our form by refreshing the page and displaying errors. And this had a nasty side effect - it would clear all the forms input fields, which is not good from the UX perspective, as that would aggravate the user.

So in this episode I'm going to show you how to validate your form without page refresh and that way keep the data in our fields. This is good for the users, but it's also cool that the page doesn't refresh.

We are going to do that by using Octobers Ajax framework and a bit of jQuery.

In this episode we are quickly going back to forms and validation, but this time we are going to do it with Ajax na October CMSs Ajax framework.

Ajax Form Validation

Our genre filter from the [last episode](http://watch-learn.com/video-tutorials/one-page-app-with-drupal-8-and-vue-js-part-04-live-filtering-with-vue-js/) is ok, but it's not great. First of all it's hard coded, so that is not good, we don't want to add new values to it every time we add a movie with a new genre.

And secondly there are some genres in it that we don't even have in our movie list. So if we choose that, we get an empty list. So that is also not the coolest.

We are going to fix all those problems using jQuery. First we are going iterate through our movies, to get available genres. And then we are going to make an array with unique genre values that we can display in our option list.

At the end we will have completely dynamic filter with all the available genres and it will populate dynamically as we add new movies and new genres.

In this episode of Drupal 8 and Vue.js learn how to make our genre filter dynamic. And for that we are going to use jQuery.