Provides utlities and plugins to build an alternate, highly flexible user interface for HTML forms inside Brightspot CMS.

• Replaces the native form validation user interface, but still uses native HTML5 constraint validation to validate fields
• Can revert to native UI if needed
• Can use native browser validation messages or custom messages
• Adds helper classes on the form and field elements to aid styling
• Allows outputting field messages anywhere on the page
• Custom field constraints can be written with very little code and shared among multiple projects.

bower install --save perfectsense/brightspot-js-form

Then load modules into your project as seen in Brightspot Base.

To enable, add a data-bsp-form attribute to a form element.

You can output the form validation message from a specific field into any element on the page using the data-bsp-form-message attribute. This example displays the validation messages from a field with the id "myfield":

<div data-bsp-form-message="#myfield"></div>

@todo: document options

Custom field contraints are added to a field with a data attribute like this:

<label>My field <input type="text" name="myfield" id="myfield" title="My field"
required bsp-form-constraint-myfield /></label>

Then you can create a new constraint by extending the base constraint object.

See: a simple synchronous example, a simple asynchronous example, and a more complex reusable constraint.

The above contraint objects are all imported into plugins like this one and instantiated there.

Custom contraints are not evaluated until all native contraints on a field pass. In the above example, the custom contraint would not run if the user had not entered any text yet because of the "required" attribute.

@todo document options

@todo document object properties/methods

bsp-form adds several classes to the form and its fields. These classes can be combined with native :valid, :invalid, and :required pseudo selectors to conditionally display formatting/messages.

• clean/dirty - When the form is clean, no fields have been edited. If a single field has been edited, the field and the form lose the clean class and gain the dirty class. Other fields will keep the clean class until a edited.
• submitted - Added to the form element after submitting the form, removed if the form is reset.

You have to run through http, so an express server is provided.

Run node demo/server.js from the project root.

Visit http://localhost:3000 in a browser.