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.

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

Step two

Create the 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.

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

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.

PreviousForm Layouts NextForm Wizard

Last updated 4 years ago