@yokotak0527/kensho-legacy

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', '[e-mail]')
// -> 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 "ａ", "ｂ", and "ｃ" 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. 😞