# Preparing Your Frontend

For Umbraco Forms to work correctly, you need to include some client dependencies.

## Client-Side Validation

Umbraco Forms ships with client-side form validation features provided by the [ASP.NET Client Validation library](https://github.com/haacked/aspnet-client-validation).

You can use the following Razor helper to output script tags containing the dependencies. To access this method you will need a reference to `Umbraco.Forms.Web`:

```csharp
@using Umbraco.Forms.Web
<head>
    @Html.RenderUmbracoFormDependencies(Url)
</head>
```

`Url` is a parameter passed into the method. It’s defined as a property on the base view model for an Umbraco template, so it will be automatically available in your Razor views.

Alternatively, you can add the dependencies to the body tag:

```csharp
@using Umbraco.Forms.Web
...

<body>
    @Html.RenderUmbracoFormDependencies(Url)
</body>
```

All dependencies originate from your Umbraco Forms installation, which means that no external references are needed.

If you want to modify the rendering of the scripts, you can provide a object parameter named `htmlAttributes`. The contents of the object will be written out as HTML attributes on the script tags.

You can use this to apply `async` or `defer` attributes. For example:

```csharp
@Html.RenderUmbracoFormDependencies(Url, new { @async = "async" })
```

If using `async`, make sure to [disable the Forms client-side validation framework check](https://docs.umbraco.com/umbraco-forms/13.latest/configuration#disableclientsidevalidationdependencycheck). This is necessary as it's not possible to guarantee that the asynchronous script will load in time to be recognized by the check. This can then cause a false positive warning.

## Validation Using jQuery

If you want to use jQuery as your validation framework for Umbraco Forms, you can manually add the following client dependencies:

* `jQuery` (JavaScript library)
* `jQuery validate` (jQuery plugin that provides client-side Form validation)
* `jQuery validate unobtrusive` (Add-on to jQuery Validation that provides unobtrusive validation via data-\* attributes)

You should remove any calls to `@Html.RenderUmbracoFormDependencies(Url)`.

The easiest way to add the dependencies is to fetch them from a [CDN](https://en.wikipedia.org/wiki/Content_delivery_network). There are various CDN services you can use:

* For example: [Microsoft CDN](https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview).
* Other CDN services you might want to look at are <https://www.jsdelivr.com/> and <https://cdnjs.com/about>, which may offer better performance and more reliable service.

To add the three client dependencies, see the examples below:

**Example within `head` tags.**

```html
<head>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.0.0.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js"></script>
</head>
```

**Example within `body` tags.**

When adding the script to the bottom of the page, you will also need to render the scripts. For more information, see [Rendering Forms Scripts](https://docs.umbraco.com/umbraco-forms/13.latest/developer/rendering-scripts) article.

```html
<body>
    <!-- Page content here -->

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.0.0.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js"></script>
</body>
```
