A robust form library for Lit that enriches input components with easy-to-use data validation features.

Overview

EliteForms

A robust form library for Lit that enriches input components with easy-to-use data validation features.

Installation

  1. npm install elite-forms
  2. 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
    • Email
    • 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>

dessert_conditional

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

License

MIT

You might also like...

A simple easy to use vanilla JavaScript library for creating input fields that accept multiple email addresses

MeiMei - Multiple Email Input MeiMei: A simple easy to use vanilla JavaScript library for creating input fields that accept multiple email addresses.

Apr 13, 2022

A base project for Express with Typescript to create an API. Includes automatic input validation and Swagger UI generation.

A base project for Express with Typescript to create an API. Includes automatic input validation and Swagger UI generation.

(Typescript) Express API with input Validation and Swagger UI Thats a mouthful isn't it. Typescript: The language used, a superset of Javascript with

Oct 26, 2022

An easy-to-use library that provide acronymous sending on form changes

An easy-to-use library that provide acronymous sending on form changes

Form Async Form Async is an easy-to-use library that provide acronymous sending on form changes. It's a great solution to preventing data loss when fi

Jan 5, 2022

This is a Google Apps Script library for parsing the form object from HTML form and appending the submitted values to the Spreadsheet.

This is a Google Apps Script library for parsing the form object from HTML form and appending the submitted values to the Spreadsheet.

HtmlFormApp Overview This is a Google Apps Script library for parsing the form object from HTML form and appending the submitted values to the Spreads

Oct 23, 2022

Easy server-side and client-side validation for FormData, URLSearchParams and JSON data in your Fresh app 🍋

Fresh Validation 🍋     Easily validate FormData, URLSearchParams and JSON data in your Fresh app server-side or client-side! Validation Fresh Validat

Dec 23, 2022

Simple and lightweight form validation for Svelte with no dependencies.

Svelidate Simple and lightweight form validation for Svelte with no dependencies Installation // npm npm install svelidate // yarn yarn add svelidate

Dec 28, 2022

A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans.

A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans.

bootstrap-validate A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans. 🎉 Support us with Developer Merchandise

Jan 2, 2023

Composition API & Yup Powered Form Validation

vue-yup-form Composition API & Yup Powered Form Validation. This tiny library allows Vue and Yup to be a best friend. Requirements The following versi

Dec 26, 2022

A Bootstrap plugin to create input spinner elements for number input

A Bootstrap plugin to create input spinner elements for number input

bootstrap-input-spinner A Bootstrap / jQuery plugin to create input spinner elements for number input. Demo page with examples Examples with floating-

Nov 7, 2022
Comments
  • added radio and checkbox

    added radio and checkbox

    done so by adding handlebox method in eliteInput and modifying min max rules

    Co-Authored by: xesthercho Co-Authored by: shinhaena-stella Co-Authored by: patrickMojica

    opened by sc00oby 1
  • Conditional Forms (generic inputs only)

    Conditional Forms (generic inputs only)

    Conditional form implemented in generic case, still need to update radiocheckbox and select inputs.

    Co-Authored by: xesthercho Co-Authored by: shinhaena-stella Co-Authored by: patrickMojica

    opened by sc00oby 0
  • Added Date and Range Functionality

    Added Date and Range Functionality

    added date and range functionality by modifying min max between functions and adding before after functions.

    Co-Authored by: xesthercho Co-Authored by: shinhaena-stella Co-Authored by: patrickMojica

    opened by sc00oby 0
Owner
OSLabs Beta
OSLabs Beta
Mag🔥Lit - A super fast and easy-to-use free and open source private encrypted Magnet/HTTP(s) Link Shortener

Mag ?? Lit Mag ?? Lit - A super fast and easy-to-use free and open source private encrypted Magnet/HTTP(s) Link Shortener https://maglit.ml Features ✅

null 280 Jan 8, 2023
➷ A robust Javascript library for capturing keyboard input. It has no dependencies.

Hotkeys HotKeys.js is an input capture library with some very special features, it is easy to pick up and use, has a reasonable footprint (~3kb) (gzip

小弟调调™ 5.7k Jan 4, 2023
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A JavaScript library stores the form-data to the localstorage so you don't have to fill the form again.

form-storage A JavaScript library stores the form-data to the localstorage so you don't have to fill the form again. Installation via npm npm install

appleple 159 Dec 10, 2022
The jQuery plugin for validation and post form data to server

NiceForm The jQuery plugin for validation and post form data to server (http://ducdhm.github.io/jquery.niceform/) Shortcuts Dependencies Rules Configu

Duc Doan (Bobby) 17 Jul 27, 2022
An example of Lit web component built with vite for use in capacitor.

Vite + Lit + Capacitor An example of Lit web component built with vite for use in capacitor. Demo Features ✅ Typescript ?? Lit ?? Vite ?? Desktop ?? i

Rody Davis 8 Aug 17, 2022
Javascript Library providing form validation helpers

Javascript-Form-Validation Javascript Library providing form validation helpers Table of contents Installation Usage Include Library Use components Co

Benoit Gambier 13 Mar 25, 2022
RenderIf is a function that receives a validation as a parameter, and if that validation is true, the content passed as children will be displayed. Try it!

RenderIf RenderIf is a function that receives a validation as a parameter, and if that validation is true, the content passed as children will be disp

Oscar Cornejo Aguila 6 Jul 12, 2022