@thunder_fury/form-validate v0.2.4

@thunder_fury/from-validate

Installation

  $ npm i -D @thunder_fruy/from-validate

import

import { Validate } from '@thunder_fury/form-validate';
const { Validate } = require('@thunder_fury/form-validate');

Method

validate key type

html data setting

The code below is an example code to check minimum 3 characters in required field and maximum 5 characters in maximum string.

  <input 
    type="text"
    data-validate-type='minLength:3 maxLength:5 required'
  >

customize Error message

• You can customize the message by setting the message in the validation method key.
• {maxLength}・{minLength}・{max}・{min} The set number is returned, and {name} is the field passed by the user.

Validate.message = {
  required: '{name}msg ...',
  maxLength: '{name}...{maxLength}...',
  minLength: '{name}...{minLength}...',
  max:'{name}...{max}...',
  min:'{name}...{min}...',
  // ... skip ...
}

• Example of message setting in Korean

Validate.message = {
  required: '{name}필드는 필수 항목입니다',
  maxLength:'{name}필드는 {maxLength}글자 이하로 입력해주세요',
  min:'{name}필드는 {min}이상 입력해주세요',
  // ... skip ...
}

• Example of message setting in Japanese

Validate.message = {
  required: '{name}項目は必須です。',
  maxLength:'{name}は{maxLength}文字以下で入力してください',
  min:'{name}は{min}以上入力してください',
  // ... skip ...
}

Example of use

The code below is an example usage. First you need to set the arguments to pass to the Validato method. If the input type is verified and an error is returned for that type, an error message is displayed.

class

class FormScreen {
  constructor() {}
  changedInput(elm: HTMLInputElement ) :void {
    switch (elm.nodeName) {
      case 'INPUT':
      case 'SELECT':
        let element = (<HTMLInputElement>elm)
        validateResult = Validate.check(element.value, validateMethod);
        break;
      default:
        break;
    }
    if(validateResult.isError) {
      let errorMsg = Validate.errorMsg(validateResult.key, labelName, validateResult.params);
      errorElm.innerHTML = errorMsg
    } else {
      errorElm.innerHTML = ''
    }
  }
}

//handling
const formScreen = new FormScreen
validateTypeStr.forEach((elm: HTMLInputElement) => {
  elm.addEventListener('change', (e): void =>  {
    let eventTarget = e.target as HTMLInputElement;
    formScreen.changedInput(eventTarget);
  });
});

React

import React from "react"
import { Validate } from '@thunder_fury/form-validate'
const InputValidateTest = () => {
  const validateCheck = (e) => {
    let validateResult: any = Validate.check(e.value, e.getAttribute('data-validate-type'))
    let errorMsgElm = document.querySelector('[date-error-msg]')
    if(validateResult.isError) {
      let errorMsg = Validate.errorMsg(validateResult.key, e.getAttribute('data-label-name'), validateResult.params);
      errorMsgElm.innerHTML = errorMsg
    } else {
      errorMsgElm.innerHTML = ''
    }
  }
  return (
    <>
      <input
        type="text"
        data-label-name="お名前"
        data-validate-type="required"
        onChange={(e)=>{validateCheck(e.target)}}
      />
      <p date-error-msg="" />
    </>
  )
}
export default InputValidateTest