npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

jb-form

v0.0.8

Published

form web component with extended feature

Downloads

584

Readme

jb-form

jb design system special form with special feature

setup & install

run following command like any other npm packages

npm i jb-form

import component script into your project

import 'jb-form'

usage

jb-form is a little different form of web-component called Customized built-in elements that mean it just extend the feature of form and change some of them so you have all form feature with a extra feature jb-form added.

<form>
  <jb-input name="name" />
  <jb-button type="submit">
</form>

and for more feature just add is="jb-form"

<form is="jb-form">
  <jb-input name="name" />
  <jb-button type="submit">
</form>

validation

all jb design system form elements are supports form validation with jb-validation way of providing them. you can check it by checkValidity or reportValidity function of form to see is input have a valid value or not.
if you use jb-form you can also show validation message of each error.

<form is="jb-form">
  <jb-input name="name" required/>
  <jb-number-input name="age" required/>
  <jb-button type="submit">
</form>
// isFormValid1 will be true if use fill all fields and false if one of them is empty
const isFormValid1 = document.querySelector('form').checkValidity();
// isFormValid2 will be true if use fill all fields and false if one of them is empty
// and it shows message below the inputs if they were empty
const isFormValid2 = document.querySelector('form').reportValidity();

get more detailed validation report

one of the jb-form extended feature is a more detailed validation report than standard form element. here is the functions:

const form = document.querySelector('form');
// will return key value object of *named* element with error message ('' if element value is valid) works for all form standards element like HTML input
form.getValidationMessages();
// will return key value object of *named* element with error summary (null if element not implement jb-validation standard) works only for custom element that implement jb-validation standard
form.getValidationSummary();
// will return key value object of *named* element with error full report (null if element not implement jb-validation standard) works only for custom element that implement jb-validation standards
form.getValidationResult();

all jb design system support jb-validation so dont worry about them if you want to use getValidationSummary or getValidationResult.
just check that your element must have name attribute in its HTML <jb-input name="something"/>. if you have a form element that dont support jb-validation you can easily create a custom element that implements WithValidation<ValidationValue> interface. for more detail read jb-validation doc.

value control

jb-design system components support some methods to manage values and state of themselves. things such as isDirty , initialValue are some of them.
jb-form provide you some methods that let you manage them easier. here are the methods:

//return all named element values in a single object
form.getFormValues()
// return a object of named elements with their dirty status(read doc below the code for more information)
form.getFormDirtyStatus();
const formValue = {
  name:"joe",
  age:10
}
// set value of form elements.(elements match by their name)
form.setFormValues(formValue);
//if second argument is true or not provided setFormValues will also update initial value and if set to false it just update value
form.setFormValues(formValue,false);
// set initial value of form elements.(initial value is used to compare with value and set isDirty flag)
form.setFormInitialValues(formValue)
//if second argument is true or not provided setFormInitialValues will also update value and if set to false it just update value
form.setFormInitialValues(formValue,false)

as you can see all elements have 2 values fields value & initialValue. value is a normal value of the fields but initial value is used just to be compared with value and set isDirty field. isDirty will be true if user change the input value from a provided initial value.