We are providing FormValidation as a front-end JavaScript solution to validate form fields.

It's specifically designed for Bootstrap and provides over 50 built-in validators and has options for customizing it to your needs.

If you want to see examples and a how-to on setting up the forms go to FormValidation.io.

Refer to our example of King County best practices.

Using FormValidation

To use FormValidation in your Sitecore pages you'll need to add two files:

• Add this to the customScriptBlock area: <script src='/js/scripts/kc-formValidation.js'></script>
• Add this to the customHead area: <link rel='stylesheet' href='https://www.kingcounty.gov/css/styles/kc-formValidation.css'>

Call the plugin to validate the form as following:

$(document).ready(function() {
    $(formSelector).formValidation({
        fields: {
          fieldName :{
            validators: {
              ...
            }
          },
          ...
        }
    });
});

For example, to validate a sample signing in form with username and password fields, the plugin might be called as:

$(document).ready(function() {
    $('#signinForm').formValidation({

        // List of fields and their validation rules
        fields: {
            username: {
                validators: {
                    notEmpty: {
                        message: 'The username is required and cannot be empty'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_]+$/,
                        message: 'The username can only consist of alphabetical, number and underscore'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'The password is required and cannot be empty'
                    }
                }
            }
        }
    });
});

Look at the formValidator getting started for more information on plugin options.