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

@yokotak0527/kensho-legacy

v2.7.2

Published

JavaScript validation library

Downloads

3

Readme

Kensho (legacy)

The JavaScript validation package.
This package will not be updated in the future.
Use Kensho or Kensho-form instead.

What can this do.

  • Simple and easy validation of values.
  • Apply multiple validation rules for one value.
  • Apply filteres to the value before validation.
  • Addition of your custom validation rules.

Install

npm

$ npm i @yokotak0527/kensho-legacy

CDN

<script src="https://cdn.jsdelivr.net/npm/@yokotak0527/kensho-legacy/dist/bundle.iife.min.js"></script>

Setup

CommonJS

const Kensho = require('@yokotak0527/kensho-legacy')

ESModule

import Kensho from '@yokotak0527/kensho-legacy'

Validation

If you want to see default validation rules, please see the guide or code.

A value validation

// Kensho.validate(RULE NAME, VALUE)
Kensho.validate('email', '[email protected]')
// -> true

// Kensho.validate(RULE NAME, VALUE, RULE OPTION)
Kensho.validate('letters', 'abcdefg', { range : { max : 5 } })
// false, Because the character count exceeds 5.

The form inputs validation

<!-- HTML -->

<form class="form">
  <input type="email" k-name="sample" k-rule="email" k-event="keyup" />
  <p k-name="sample.error"></p>
</form>
// JS

const form = new Kensho('.form')

In the case of the above code, every time a keyup event occurs, it validates that the entered value meets the email validation rule.

Also, the following code validates the values entered when the keyup and blur events occur.

<input type="email" k-name="sample" k-rule="email" k-event="keyup, blur" />

Of course, you can also set multiple validation rules.

<input type="email" k-name="sample" k-rule="email, required" k-event="keyup, blur" />

<!-- with custom messages -->
<input
  type="email"
  k-name="sample"
  k-rule="email, required"
  k-event="keyup, blur"
  k-message="{'email': 'invalid email format.', 'required': 'required.'}"
/>

If the validation rule has options...

<input
  type="email"
  k-name="sample"
  k-rule="email, ['letters', {range : {max : 2}}]"
  k-event="keyup, blur"
/>

As you can see, more complex validations, the harder it is to read the code.
If you need complex validation, you might want to write the validation settings in JS.

<!-- HTML -->

<form action="" class="myform">
  <input type="text" name="nickname">
  <p></p>
</form>

Assuming there is an HTML file like the one above, write JS code as following below.

// JS

const kensho = new Kensho('.myform', { search : false })
// By default, The Kensho will look for HTML elements with The Kensho attribute values
// in the specified form when you create an instance,
// but the If the option `search : false` is given, the operation will not be performed.

kensho.add({
  inputElement : 'input[name="nickname"]',
  errorElement : 'p',
  event        : ['keyup', 'blur'],
  rule         : ['required', ['letters', { range : { max : 10 } }]],
  errorMessage : {'required': 'required.', 'letters':'max charactor number is 10.'}
})

The inputElement and errorElement properties can be either query selectors as strings or HTMLInputElement directly.

Filtering

Sometimes you may want to filter the values before validating them. For example, it want to convert full-size string to half-size string and then validate it.
The Kensho provides such a filtering feature as a plugin.

If you want to see default plugins, please see code.

<form>
  <input
    type="text"
    k-name="text"
    k-rule="['regexp', {'regexp' : /^[abc]+$/ }]"
    k-event="keyup"
    k-filter="full2half"
  >
  <p k-name="text.error"></p>
</form>
<script>
  window.onload = function(){
    const kensho = new Kensho('form')
  }
</script>

The above code only accepts characters "a", "b", and "c" by the regexp validation rule, but it also accepts full size "a", "b", and "c" because the filter full2half filters the values before validation.

Add the validate rule

Kensho.rule.add('myrule', (value, option, Kensho)=>{
  return value === 'hello'
})

Kensho.validate('myrule', 'hello')
// -> true

Add the Plugin

<form>
  <input type="text" k-name="text" k-rule="required" k-event="keyup" k-filter="myPlugin" />
  <p k-name="text.error"></p>
</form>
<script>
  window.onload = function(){
    Kensho.plugin.add('myPlugin', function myPlugin(value){
      // `this` is bind to the Kensho class.
      // do something...
      return value
    })
    const kensho = new Kensho('form')
  }
</script>

Example

pre-sending validation

<!-- HTML -->

<form class="myform">
  <input type="email" k-name="sample" k-rule="email" k-event="keyup" />
  <p k-name="sample.error"></p>
</form>
// JS
const formElm = document.querySelector('.myform')

const kensho  = new Kensho(formElm)

formElm.addEventListener('submit', (evt)=>{

  kensho.validateAll()

  if (kensho.hasError()) {
    evt.preventDefault()
    alert('input error')
  }
})

ignore validations when the value is empty

<form class="myform">
  <input type="email" k-name="sample" k-rule="email" k-event="keyup" k-allowempty />
  <p k-name="sample.error"></p>
</form>

change the prefix of the Kensho attribute names.

<form action="">
  <input type="email" data-name="sample" data-rule="email" data-event="keyup">
  <p data-name="sample.error"></p>
</form>
<script>
  window.onload = function(){
    Kensho.config.customAttrPrefix = 'data-'
    const kensho = new Kensho('form')
  }
</script>

For more details..

~~https://yokotak0527.gitbook.io/kensho/~~
※ The content is old. Update soon. 😞