Formalizer - Documentation

new Formalizer()

Main Formalizer class constructor

Methods

(private, static) _activeGrp()

Set the current group to display

(private, static) _chckRowCom(row, name, fields)

ROW INPUT Check the row component type, this will then delegate to the correct method for creating the row element

Parameters:

Name	Type	Description
`row`	HTMLElement	The row element reference
`name`	String	The row name reference
`fields`	Object	The fields object for the group

(private, static) _checkEmail(name, value, result, custErr)

Determines if a given string is empty

Parameters:

Name	Type	Description
`name`	String	The name of the field
`value`	String	The field input value
`result`	Array	Result array
`custErr`	String	The custom error message for the field validation

(private, static) _checkEmpty(name, value, result, custErr)

Determines if a given string is empty

Parameters:

Name	Type	Description
`name`	String	The name of the field
`value`	String	The field input value
`result`	Array	Result array
`custErr`	String	The custom error message for the field validation

(private, static) _checkMatch(name, value, result, custErr)

Determines if 2 values match, specifically for password confirmation type fields

Parameters:

Name	Type	Description
`name`	String	The name of the field
`value`	String	The field input value
`result`	Array	Result array
`custErr`	String	The custom error message for the field validation

(private, static) _checkMaxMin(name, value, max, min, result, custErr)

Determines if a given value is greater than max or less than min

Parameters:

Name	Type	Description
`name`	String	The name of the field
`value`	String	The field input value
`max`	Number	Max value
`min`	Number	Min value
`result`	Array	Result array
`custErr`	String	The custom error message for the field validation

(private, static) _checkNotify(values)

Check if there are any notifications set and dispatch

Parameters:

Name	Type	Description
`values`	Object	The user inputs data object

(private, static) _checkValues()

VALIDATE Initialize the validation for the form fields, this will determine if EMPTY values are permitted, which by default they are not in validation this should also check for maximum and minimum values

(private, static) _clearWarnings()

REMOVE WARNING - Remove the warning elements that were added to the do

(private, static) _crteButs()

Create a form element based on the element type

(private, static) _crteChckbxEl(row, opts, name)

Create a group of checkbox elements based on the options

Parameters:

Name	Type	Description
`row`	HTMLElement	The row element reference
`opts`	Object	The options for the element
`name`	String	The row name reference

(private, static) _crteChckGrdOpts(row, opts, values, name)

Create the options for the checkbox grid

Parameters:

Name	Type	Description
`row`	HTMLElement	The row element reference
`opts`	Object	The options for the element
`values`	Object	The values to populate the options with
`name`	String	The row name reference

(private, static) _crteChckGrid(row, opts, name)

Create a group of checkbox elements based on the options

Parameters:

Name	Type	Description
`row`	HTMLElement	The row element reference
`opts`	Object	The options for the element
`name`	String	The row name reference

(private, static) _crteCheckGrp(row, opts, values, name)

Create a group of checkbox elements based on the options

Parameters:

Name	Type	Description
`row`	HTMLElement	The row element reference
`opts`	Object	The options for the element
`values`	Array	An array of values for the checkbox
`name`	String	The row name reference

(private, static) _crteDateSelCom(row, opts, name)

This will generate 3 SELECT element for the Day/Month/Year

Parameters:

Name	Type	Description
`row`	HTMLElement	The row element reference
`opts`	Object	The options for the element
`name`	String	The row name reference

(private, static) _crteFileCom(row, opts, name)

Creates the password component which is a component that has 2 password fields form confirnmation and an optional strength check analysis

Parameters:

Name	Type	Description
`row`	HTMLElement	The row element reference
`opts`	Object	The options for the element
`name`	String	The row name reference

(private, static) _crteGrd(parent, name, attributes, data)

Create a list grid that users can select item from, the first row has a checkbox to allow for selection

Parameters:

Name	Type	Description
`parent`	HTMLElement	The row or component container to append the element to
`name`	String	The name reference of the element
`attributes`	Object	The attributes for the element
`data`	Object	The data object for the row

(private, static) _crteGrpEl(grp, fields)

CREATE GROUP ELEMENTS Create the group elements, the elements that should be present in one group

Parameters:

Name	Type	Description
`grp`	HTMLElement	The group element reference
`fields`	Object	The fields object for the group

(private, static) _crteInputEl(row, opts, name)

Create a new input element, this will configure the creation of standard input type element such as the "text" "password" "radio" "checkbox"

Parameters:

Name	Type	Description
`row`	HTMLElement	The row element reference
`opts`	Object	The options for the element
`name`	String	The row name reference

(private, static) _crtePwordCom(row, opts, name)

Creates the password component which is a component that has 2 password fields form confirnmation and an optional strength check analysis

Parameters:

Name	Type	Description
`row`	HTMLElement	The row element reference
`opts`	Object	The options for the element
`name`	String	The row name reference

(private, static) _crteRadioGrp(row, opts, name)

Create a group of radio elements based on the options

Parameters:

Name	Type	Description
`row`	HTMLElement	The row element reference
`opts`	Object	The options for the element
`name`	String	The row name reference

(private, static) _crteRowEl(grp, name, fields)

CREATE ROW Create a new form row which has the default left and right element to control positioning of the form row elements and labels

Parameters:

Name	Type	Description
`grp`	HTMLElement	The group element reference
`name`	String	The row name reference
`fields`	Object	The fields object for the group

(private, static) _crteSelectDateOpts(row, opts, name)

Parameters:

Name	Type	Description
`row`	HTMLElement	The row element reference
`opts`	Object	The options for the element
`name`	String	The row name reference

(private, static) _crteSelectEl(row, opts, name)

Create a new input element</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>row</code></td> <td class="type"> <span class="param-type">HTMLElement</span> </td> <td class="description last"><p>The row element reference</p></td> </tr> <tr> <td class="name"><code>opts</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="description last"><p>The options for the element</p></td> </tr> <tr> <td class="name"><code>name</code></td> <td class="type"> <span class="param-type">String</span> </td> <td class="description last"><p>The row name reference</p></td> </tr> </tbody> </table> <h4 class="name" id="._encodeData"><span class="type-signature">(private, static) </span>_encodeData<span class="signature">(inputData)</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Encode the formdata to base64</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>inputData</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="description last"><p>The form data object</p></td> </tr> </tbody> </table> <h4 class="name" id="._fileChange"><span class="type-signature">(private, static) </span>_fileChange<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>File changed event handler</p> </div> <h4 class="name" id="._formSubmit"><span class="type-signature">(private, static) </span>_formSubmit<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Handle the form submit action button press, this will determine if the field values required validation and the submission method to use</p> </div> <h4 class="name" id="._formSubmitPost"><span class="type-signature">(private, static) </span>_formSubmitPost<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Overrides the default submit action for a <form> POST, this is only executed if the Submit button has the type="submit" value set</p> </div> <h4 class="name" id="._getElements"><span class="type-signature">(private, static) </span>_getElements<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Returns an object with the default html elements added</p> </div> <h4 class="name" id="._getGrdChkVal"><span class="type-signature">(private, static) </span>_getGrdChkVal<span class="signature">(row, row, vals, data)</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>GETS and SETS the user inputs for the checkboxes</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>row</code></td> <td class="type"> <span class="param-type">String</span> </td> <td class="description last"><p>The row identifier</p></td> </tr> <tr> <td class="name"><code>row</code></td> <td class="type"> <span class="param-type">HTMLElement</span> </td> <td class="description last"><p>The row element</p></td> </tr> <tr> <td class="name"><code>vals</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="description last"><p>The vals object to set the values in</p></td> </tr> <tr> <td class="name"><code>data</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="description last"><p>The user input data object</p></td> </tr> </tbody> </table> <h4 class="name" id="._getInputs"><span class="type-signature">(private, static) </span>_getInputs<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>GET INPUTS - Use this to loop through and find the component types and either GET or SET the data for the component/input</p> </div> <h4 class="name" id="._getInVal"><span class="type-signature">(private, static) </span>_getInVal<span class="signature">(row, row, vals, data)</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>COMPONENT CHECK VALUES - The following methods GET or SET values for the designated components</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>row</code></td> <td class="type"> <span class="param-type">String</span> </td> <td class="description last"><p>The row identifier</p></td> </tr> <tr> <td class="name"><code>row</code></td> <td class="type"> <span class="param-type">HTMLElement</span> </td> <td class="description last"><p>The row element</p></td> </tr> <tr> <td class="name"><code>vals</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="description last"><p>The vals object to set the values in</p></td> </tr> <tr> <td class="name"><code>data</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="description last"><p>The user input data object</p></td> </tr> </tbody> </table> <h4 class="name" id="._hdleCancel"><span class="type-signature">(private, static) </span>_hdleCancel<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Handle the cancel button click, this will execute the callback so that an action can be performed on the container of the form</p> </div> <h4 class="name" id="._hdleNotify"><span class="type-signature">(private, static) </span>_hdleNotify<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Handles the notify action for the element value change events which are supplied in the options configuration on initialization</p> </div> <h4 class="name" id="._initialize"><span class="type-signature">(private, static) </span>_initialize<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Initialize the component</p> </div> <h4 class="name" id="._initValidate"><span class="type-signature">(private, static) </span>_initValidate<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>VALIDATE Initialize the validation for the form fields, this will determine if EMPTY values are permitted, which by default they are not in validation this should also check for maximum and minimum values</p> </div> <h4 class="name" id="._nextGrp"><span class="type-signature">(private, static) </span>_nextGrp<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Handle the next button press, this will increment the current group and execute the activeGrp function</p> </div> <h4 class="name" id="._prevGrp"><span class="type-signature">(private, static) </span>_prevGrp<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Handle the previous button press, this will decrement the current group and execute the activeGrp function</p> </div> <h4 class="name" id="._pwordChange"><span class="type-signature">(private, static) </span>_pwordChange<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Password changed event handler</p> </div> <h4 class="name" id="._removeEvents"><span class="type-signature">(private, static) </span>_removeEvents<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Remove the events for formalizer component</p> </div> <h4 class="name" id="._removeNotifyEvents"><span class="type-signature">(private, static) </span>_removeNotifyEvents<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Removes any notification events that have been bound to elements</p> </div> <h4 class="name" id="._render"><span class="type-signature">(private, static) </span>_render<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Render the component element, this method can be called any number of times if the data for the component is added again</p> </div> <h4 class="name" id="._setData"><span class="type-signature">(private, static) </span>_setData<span class="signature">(inputsOnly)</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Set the data for the form based on the data supplied when the component is initialized</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>inputsOnly</code></td> <td class="type"> <span class="param-type">Boolean</span> </td> <td class="description last"><p>Defines that only the inputs should be updated</p></td> </tr> </tbody> </table> <h4 class="name" id="._setElOpts"><span class="type-signature">(private, static) </span>_setElOpts<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>SET OPTIONS - This will set the option data for RADIO GROUPS, SELECT elements CHECKBOX GROUPS and other components that have configurable options</p> </div> <h4 class="name" id="._setEvents"><span class="type-signature">(private, static) </span>_setEvents<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Set the events for the select menu</p> </div> <h4 class="name" id="._setNotifyEvents"><span class="type-signature">(private, static) </span>_setNotifyEvents<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Sets the notification events for any elements that require it</p> </div> <h4 class="name" id="._showWarnings"><span class="type-signature">(private, static) </span>_showWarnings<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>WARNING - Show the warnings on the form by adding the "invalid selector" to the form elements</p> </div> <h4 class="name" id=".destroy"><span class="type-signature">(static) </span>destroy<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Destroy the component and remove all elements from the dom and clear all events added, returns a null value in the event the object was stored in a reference to nullify the reference</p> </div> <h4 class="name" id=".disable"><span class="type-signature">(static) </span>disable<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Disable the form items, this will disable all fields from input</p> </div> <h4 class="name" id=".enable"><span class="type-signature">(static) </span>enable<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Enable the form items, this will enable all fields for input</p> </div> <h4 class="name" id=".update"><span class="type-signature">(static) </span>update<span class="signature">(data)</span><span class="type-signature"></span></h4> <dl class="details"> </dl> <div class="description"> <p>Update the select list</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>data</code></td> <td class="type"> <span class="param-type">object</span> </td> <td class="description last"><p>The data object to update with</p></td> </tr> </tbody> </table> </article> </section> </div> <br class="clear"> <footer> Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a> on Mon Jan 23 2017 11:19:49 GMT+0000 (GMT Standard Time) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme. </footer> <script>prettyPrint();</script> <script src="scripts/linenumber.js"></script> </body> </html>