jQuery VALIDATE.JSを使うには？

/ jQuery / By
ショコラ
ショコラ

jQuery VALIDATE.JSを使うには？

この JavaScript のライブラリを会社のあるプロジェクトで使用していたので勉強がてら調べてみました。
VLIDATE.JS の HP は https://validatejs.org です。

もっさん先輩
もっさん先輩

validate の基本形は↓こちらです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.0/dist/semantic.min.css">
  <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.0/dist/semantic.min.js"></script>
</head>
<body>
  <div class="ui container">
    <form id="login" class="ui form">
      <div class="field">
        <label>INPUT</label>
        <div class="field">
          <input type="text" name="form">
        </div>
      </div>
      <button class="ui submit button">Submit</button>
    </form>
  </div>
<script>
$('form#login').on('submit',() => {

  // エラーを削除する。
  $('.error').remove()

  const valid = {
    form: {
      presence: {
        message: "^空です。",
      },
    },
  }

  const form = validate.collectFormValues($('form#login'))
  let submit = !validate(form,valid)

  if (!submit) {
    const success = () => {}
    const error = errors  => {
      $.each(errors,(el,val) => {
        let msg = `
          <div class="ui pointing red basic label error">
            ${val[0]}
          </div>`
        $(`[name=${el}]`).after(msg);
      })
    }
    validate.async(form,valid).then(success,error)
  }

  return submit
})
</script>
</body>
</html>

31～33行目 を色々変えてチェックを確認することができます。

入力必須

presence: {
  message: "^空です。",
}

文字数チェック（１００文字以下）

length: {
  maximum: 100,
  message: "^100文字以下で入力してください。",
}

メールアドレスチェック

email: {
  message: "^メールアドレスの形式ではありません。",
}

整数チェック

numericality: {
  onlyInteger: true,
  message: "^整数で入力してください。",
}

数値範囲チェック（０以上１０以下）

numericality: {
  onlyInteger: true,
  greaterThanOrEqualTo: 0,
  lessThanOrEqualTo: 10,
  message: "^0～10の数値を入力してください。",
}

包含チェック（セレクトなどの選択しで使用）

inclusion: {
  within: ['NEW','ALMOST_NEW','CLEAN','LITTLE_DIRTY','DIRTY','BAD'],
  message: "^選択してください。",
}

以上

Scroll to Top