Enhanced form controls

Enhanced form controls, like clear and show password buttons can be generated dynamically for supported input types.

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
	        COCPL_Form.init();
	        // OR use the following line to generate the enhanced form controls ONLY
	        COCPL_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: