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
Include the relevant javascript files inside the
<body>
before core template script inclusions, if it's not there already. Please view jQuery plugin inclusion guideline rules
<script type="text/javascript" src="assets/plugins/jquery-validation/js/jquery.validate.min.js">
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>
Apply the plugin.
<script>
$(document).ready(function() {
$('#myForm').validate();
});
</script>
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 way of showing error messages. Will appear on any form except for forms with attached groups
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.