# 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.

![](https://3396288764-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDBWrdKcsIL5-tSGnv_%2F-LEA1Yr0adOan7rR4c06%2F-LEA1cFC_6VPyFMpbzWB%2FScreen%20Shot%202018-06-04%20at%207.13.31%20PM.png?alt=media\&token=4a382694-6b63-4f4d-a23a-3cd6c21b2e1b)

### **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.

![](https://3396288764-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDBWrdKcsIL5-tSGnv_%2F-LEA1Yr0adOan7rR4c06%2F-LEA1e55AqEvPApoFGX0%2FScreen%20Shot%202018-06-04%20at%207.13.44%20PM.png?alt=media\&token=7e595339-2fa1-4593-8c53-e069e88987c0)
