EliteForms
A robust form library for Lit that enriches input components with easy-to-use data validation features.
Installation
npm install elite-forms
import 'elite-forms'
into your project file
Usage
For full documentation, please visit our website https://www.eliteforms.io/
Using the elite-form tag
Our custom element allows you to validate the entire form before a submit event and comes equipped with a Submit button.
Using the elite-input tag:
Use our custom tag with your desired type attribute to create any input field. Types supported include:
- Text
- Password
- Date
- Radio
- Checkbox
- Select
- Range
- Textarea
Example of text input:
<elite-input
id='username'
type='text'
class="elite-input"
label='Choose a username'
placeholder='username'
.validationRules= ${{
required: true,
alphanumeric: true,
between: [3,10],
}}
></elite-input>
Example of checkbox input:
<elite-input
id="breakfast"
type="checkbox"
class="elite-input"
label="Pancakes or waffles?"
name='breakfast'
note='Note: you can choose both 😉'
.validationRules=${{
required: true,
}}
.options=${[
{option: 'pancakes', value: 'pancakes'},
{option: 'waffles', value: 'waffles'},
]}
></elite-input>
Field Validation:
Include the validationRules attribute in your element with the rules you’d like applied to the form field.
Example of alphanumeric rule:
<elite-input
id='username'
type='text'
class="elite-input"
label='Choose a username'
validationName='Username'
note='Note: symbols are not allowed'
.validationRules= ${{
alphanumeric: true,
}}
></elite-input>
Example of reqUpper, reqLower, reqSpecialChar rules:
<elite-input
id='password'
type='password'
class='elite-input'
label='Set a password'
.validationRules= ${{
reqNumber: true,
reqUpper: true,
reqLower: true,
reqSpecialChar: true
}}
></elite-input>
Form Validation:
The submit event will not fire successfully unless all fields have passed its validation rules. Our form validator confirms the final state of each element before completing.
Conditional Fields:
To create conditional fields, you must nest your conditional field within the dependent field.
<elite-input
id="dessertconditional"
type="radio"
class='elite-input'
label="choose your dessert"
name='dessertconditional'
.options=${[
{option: 'cake', value: 'cake'},
{option: 'ice cream', value: 'ice cream'}
]}
.conditional=${['ice cream']}
.validationRules=${{
required: true,
}}
>
<elite-input
id="flavor"
type="radio"
class="elite-input"
label="Select a flavor:"
name="flavor"
validationName="ice cream"
.options=${[
{option: 'vanilla', value: 'vanilla'},
{option: 'chocolate', value: 'choco'},
{option: 'strawberry', value: 'strawb'},
{option: 'neopolitan', value: 'neo'}
]}
></elite-input>
</elite-input>
Contributing
We welcome all contributors! Features + improvements we’ve started or would like to see implemented:
- Model binding
- Typescript support
- Ability to create custom validation rule
- Custom validation error messages
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Please make sure to update tests as appropriate.
https://github.com/oslabs-beta/EliteForms