Enhanced form controls

Demo

How to use

1. Load the JavaScript files to your page and call one of the initialization lines:

	<script src="js/jquery-2.2.4.min.js"></script>
	<script src="js/jquery.validate.min.js"></script><!-- Optional: This file handles form validation -->
	<script src="js/coc.forms.js"></script>
	<script>
	    $( document ).ready( function() {
	        // Use the following line to initialize the validation AND
	        // to generate the enhanced form controls
	        COC.Form.init();
	        // OR use the following line to generate the enhanced form controls ONLY
	        COC.Form.initFormControls();
	    });
	</script>

2. Add this data attribute to any forms you wish to generate the enhanced form controls for: data-pl-frm-ctrl="true".

<!-- Example form with the data-attributes for validation AND enhanced form controls -->
<form class="form-width-md" data-pl-frm-vld="true" data-pl-frm-ctrl="true">
    ...
</form>

<!-- Example form with ONLY the data-attribute for validation -->
<form class="form-width-md" data-pl-frm-vld="true">
    ...
</form>

Supported input types

The following input types are supported: