# Form Validation

Pages is packaged with [jQuery Validation Plugin](http://jqueryvalidation.org/) which is currently the de-facto plugin for form validation.

{% hint style="info" %}
Please refer to [jQuery Validation Plugin Documentation](http://jqueryvalidation.org/) to learn about plugin options
{% endhint %}

**Step one**

Include the relevant javascript files inside the `<body>`before core template script inclusions, if it's not there already.

```markup
<script type="text/javascript" src="assets/plugins/jquery-validation/js/jquery.validate.min.js">
```

**Step two**

Create the markup.

```markup
<form id="myForm" role="form">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group form-group-default required">
                <label>First name</label>
                <input type="text" class="form-control" name="firstName" minlength="2" required>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group form-group-default">
                <label>Last name</label>
                <input type="text" class="form-control" name="lastName" minlength="2" required>
            </div>
        </div>
    </div>
    <button class="btn btn-primary" type="submit">Register</button>
</form>
```

**Step three**

Apply the plugin.

```markup
<script>
$(document).ready(function() {
    $('#myForm').validate();
});
</script>
```

## **Error messages**

`showErrors` and `errorPlacement` functions of jQuery Validate have been overridden in Pages core. As a result, the way error messages are displayed will differ depending on the form layout style you've declared in the code

### **Standard**

Standard way of showing error messages. Will appear on any form except for forms with attached groups.

![](/files/-LEA1cFC_6VPyFMpbzWB)

### **Attached**

Recommended to use with Pages default form style having attached elements with `.form-group-attached` wrapper. The error messages will appear in the form of popovers.

![](/files/-LEA1e55AqEvPApoFGX0)


---

# 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.pages.revox.io/form-validation.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.
