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-3.5.1.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 initialize ONLY the enhanced form controls.
		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 to trigger the validation AND the enhanced form controls. -->
<form data-pl-frm-vld="true" data-pl-frm-ctrl="true">
	...
</form>

<!-- Example form with the data-attribute to trigger the enhanced form controls ONLY. -->
<form data-pl-frm-ctrl="true">
	...
</form>

Supported input types

The following input types are supported:

Input type	Type of form control button generated
`type="text"`	Clear input
`type="email"`	Clear input
`type="search"`	Clear input
`type="url"`	Clear input
`type="password"`	Show password