Parsley.jsの使い方 クライアント側フォームバリデーション

npm install parsleyjs

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://parsleyjs.org/dist/parsley.min.js"></script>
<script src="https://parsleyjs.org/dist/i18n/ja.js"></script>

<link rel="stylesheet" href="https://parsleyjs.org/src/parsley.css" />

<form data-parsley-validate>
...
</form>

<form id="私のフォーム">
...
</form>

<script>
  $('#私のフォーム').parsley();
</script>

<script>
    $('#私のフォーム1, #私のフォーム2, #私のフォーム3', ...).parsley(
    ...設定...
    );
</script>

<input type="text" name="名前" required data-parsley-length="[3, 12]">

<input type="text" data-parsley-multiple="3" />

<script>
  window.Parsley.addValidator("multiple", {
    requirementType: "integer",
    validateNumber: function (value, requirement) {
      return 0 === value % requirement;
    },
    messages: {
      en: "This value should be a multiple of %s",
      ja: "この値は %s の倍数でなければなりません。",
    },
  });
</script>

<input type="text" name="合言葉" data-parsley-remote="./yunyun.php">

<?php

if($_GET['合言葉'] == 'ゆんゆん'){
    $code = 200;
}
else{
    $code = 404;
}

http_response_code($code);

<input
  type="text"
  name="名前"
  required
  data-parsley-error-message="名を名乗れ"
/>

<input
  type="text"
  name="名前"
  required
  minlength="3"
  data-parsley-required-message="名を名乗れ"
  data-parsley-minlength-message="3文字以上で名を名乗れ"
/>

<input
  type="text"
  name="名前"
  required
  data-parsley-errors-messages-disabled
/>

<div class="form-check">
  <input
    class="form-check-input"
    type="checkbox"
    name="好きな動物"
    id="インパラ"
    value="インパラ"
    required
    data-parsley-mincheck="3"
    data-parsley-errors-container="#エラーメッセージ"
  /><label class="form-check-label" for="インパラ">インパラ</label>
</div>

<div class="form-check">
  <input
    class="form-check-input"
    type="checkbox"
    name="好きな動物"
    id="チベットスナギツネ"
    value="チベットスナギツネ"
  /><label class="form-check-label" for="チベットスナギツネ"
    >チベットスナギツネ</label
  >
</div>

<div class="form-check">
  <input
    class="form-check-input"
    type="checkbox"
    name="好きな動物"
    id="マンドリル"
    value="マンドリル"
  /><label class="form-check-label" for="マンドリル"
    >マンドリル</label
  >
</div>

<div id="エラーメッセージ"></div>

<form action="" method="post" data-parsley-trigger="focusout">
...
</form>

<input
  type="text"
  name="合言葉"
  data-parsley-remote="./yunyun.php"
  data-parsley-debounce="500"
/>

<input
  type="password"
  name="パスワード"
  required
  pattern="[a-zA-Z0-9]{8,32}"
  data-parsley-validation-threshold="7"
/>

<div id="名前のコンテナ">
  <label for="名前">名前</label>
  <input
    type="text"
    name="名前"
    required
    data-parsley-class-handler="#名前のコンテナ"
  />
</div>

<input
  type="text"
  name="名前"
  required
  data-parsley-ui-enabled="false"
/>

/* 検証が成功したとき */
input.parsley-success,
select.parsley-success,
textarea.parsley-success {
  color: #468847;
  background-color: #dff0d8;
  border: 1px solid #d6e9c6;
}
/* 検証が失敗したとき */
input.parsley-error,
select.parsley-error,
textarea.parsley-error {
  color: #b94a48;
  background-color: #f2dede;
  border: 1px solid #eed3d7;
}
/* エラーメッセージのリスト<ul>に設定されるclass */
.parsley-errors-list {
  margin: 2px 0 3px;
  padding: 0;
  list-style-type: none;
  font-size: 0.9em;
  line-height: 0.9em;
  opacity: 0;
  color: #b94a48;

  transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -webkit-transition: all 0.3s ease-in;
}

.parsley-errors-list.filled {
  opacity: 1;
}

<form id="私のフォーム">
...
</form>

<script>
  $("#私のフォーム").parsley({
    trigger: "focusout",
    priorityEnabled: false,
  });
</script>

<script>
  $("#私のフォーム").parsley({
    //Bootstrapに対応したクラス名に変更
    errorClass: "is-invalid",
    successClass: "is-valid",
    //エラーメッセージを囲むHTML
    errorsWrapper: '<ul class="list-unstyled invalid-feedback mb-0"></ul>',
    errorTemplate: "<li></li>",
  });
  //チェックボックス、ラジオボタンの設定
  //同じグループの<input>要素に同じclassを設定しておく
  //例: <input type="checkbox" class="foo">
  $(".foo").parsley({ classHandler: ".foo" });
</script>