Form Validation

Pages UI
Search…
Pages UI
v5.0.1 - Pages HTML
Form Validation
Pages is packaged with jQuery Validation Plugin which is currently the de-facto plugin for form validation.
Please refer to jQuery Validation Plugin Documentation to learn about plugin options
Step one
Include the relevant javascript files inside the <body>before core template script inclusions, if it's not there already.
1
<script type="text/javascript" src="assets/plugins/jquery-validation/js/jquery.validate.min.js">
Copied!
Step two
Create the markup.
1
<form id="myForm" role="form">
2
    <div class="row">
3
        <div class="col-sm-6">
4
            <div class="form-group form-group-default required">
5
                <label>First name</label>
6
                <input type="text" class="form-control" name="firstName" minlength="2" required>
7
            </div>
8
        </div>
9
        <div class="col-sm-6">
10
            <div class="form-group form-group-default">
11
                <label>Last name</label>
12
                <input type="text" class="form-control" name="lastName" minlength="2" required>
13
            </div>
14
        </div>
15
    </div>
16
    <button class="btn btn-primary" type="submit">Register</button>
17
</form>
Copied!
Step three
Apply the plugin.
1
<script>
2
$(document).ready(function() {
3
    $('#myForm').validate();
4
});
5
</script>
Copied!
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.
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.
Form Layouts
Form Wizard
Last modified 1yr ago
Copy link
Contents
Error messages
Standard
Attached