# 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](/umbraco-forms/13.latest/developer/configuration.md#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](/umbraco-forms/13.latest/developer/rendering-scripts.md) 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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.umbraco.com/umbraco-forms/13.latest/developer/prepping-frontend.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
