Form inputs validation

Create an instance of Kensho if you want to validate each input value of the form.

HTML

<form class="sample-form">
    <input type="text" name="sample-input">
    <input type="submit">
</form>

JS

// If you are using a browser, you can find the class of Kensho in the property of `window.yokotak0527`.
const kensho = new yokotak0527.Kensho('.sample-form')

kensho.add({
    inputElement : '.sample-input',
    rule : ['required']
})

Create an instance with new. The string to pass to the constructor is a form query selector or HTMLFormElement.

Next, we will add the items we want to validate.

There are two ways to add it: by adding your own attributes to the HTML element, or by using the kensho.add() method.

Add attributes

HTML

<form>
    <input type="text"
        k-name="test"
        k-rule="required"
        k-message="required"
        k-event="keyup"
    >
    <p k-name="test.error"><p>
</form>

JS

const kensho = new yokotak0527.Kensho('form')

In the above example, the input value is validated when a key is entered, and if nothing is entered, "required" is displayed in the <p k-name="test.error"> tag.

• The attributes is able to specified for the HTML input element only.

• But, The error element (that is specified k-name="xxx.error" attributes) is exception.

• The error element k-name is `[INPUT ELEMEN k-name].error`.

attributes
k-name	required	The name of this input, managed by Kensho.
k-rule	required	One or more validation rules.
k-message	optional	The error Messages.
k-event	optional	The JavaScript Events name that trigger the validation.
k-filter	optional	Plug-ins that you want to apply to values before they are validated.

Specifying multiple rules

Of course I know that! you want to validated is a required, a number and not a negative number. In most cases, There's more than one rule for one input, right? It can be done.

HTML

<form>
    <input
        type="email"
        k-name="test"
        k-rule="required, email"
        k-event="keyup"
    >
    <p k-name="test.error"></p>
</form>

JS

const kensho = new yokotak0527.Kensho('form')

Look at the k-rule attribute. To specify multiple rules, specify them with a comma separator as shown above.

Also, some of the rules have options. In such a case, please enter the following.

<form>
    <input
        type="email"
        k-name="sample"
        k-rule="required, ['regexp', { 'regexp' : /hoge/ }]"
        k-event="keyup"
    >
</form>

The rule with options are specified in array notation and the options are entered in the second part of the array. The option must be an Object.

kensho.add(param)

param.inputElement

The HTML Input element to accept input for the value to be verified.

Type	Desc.
string	`document.querySelector()` value
HTMLInputElement
NodeListOf<HTMLInputElement>
HTMLInputElement[]

Several types are supported, but basically the method of entering a string as document.querySelector() value is sufficient.

param.rule

Specifying a Validation Rule.

Type	Desc.
string
Array< string, [ string, { [ x : string ] : any } ] >

// One rule with no options
kensho.add({
   rule : 'required'
   ...
})

// One rule with options
kensho.add({
   rule : [
      ['regexp', {regexp : /^hoge/}]
   ]
   ...
})

// 2 or more rules
kensho.add({
   rule : [
      'required',
      ['regexp', {regexp : /^hoge/}]
   ]
   ...
})

param.errorElement?

A HTML element that outputs an error message.

Note that if you omit this parameter, param.errorMessage is also omitted.

Type	Desc.
string	`document.querySelector()` value
HTMLElement

param.errorMessage?

Error messages for each validation rule. If no error message of the rule specified in param.rule is specified, the default error message will be output.

Type	Desc.
string
{ [ ruleName : string ] : string }

It is also possible to display only one error message, instead of displaying individual error messages, if there is an error in any of the rules. more

param.event?

Specify when to validate. ex. keyup, blur see Event reference | MDN

Type	Desc.
string
string[]

param.name?

Type	Desc.
string

param.valueFilter?

This is used when you want to do something before the value is validated.

Type	Desc.
Function

The function is bound to the Kensho instance and executed with the value to be verified as the first argument and the Kensho class as the second argument. The function must return the value that you want to verify. For example, if you want to take a two-byte number and make it into one byte before verifying it

kensho.add({
   valueFilter(value, Kensho){
      return Kensho.use('full2half', value)
   }
})