Skip to main content
King County logo

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.

We have also created some examples that use King County best practices here.

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 settings page for more information on plugin options.

Adjusting feedback FontAwesome icon position

In some cases, the FontAwesome feedback icons aren't shown properly and will require some CSS to fix. By default, Bootstrap defines feedback icon position as following:


.has-feedback .form-control-feedback {
    top: 25px;
    right: 0;
}
.form-horizontal .has-feedback .form-control-feedback {
    top: 0;
    right: 15px;
}

By customizing the value of top and right properties, you can adjust the feedback icon to deserved position.

If you need more help using CSS or adjusting the icon go here or contact webteam@kingcounty.gov