The Acorn Spirit's Journey

送信ボタンをクリックしたら、バリデーションをチェック。
エラーが無ければ確認ダイアログ（confirm）を出してOKボタンで送信する。

　
jquery.min.jsとjquery.validate.min.js読み込み

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.20.0/dist/jquery.validate.min.js"></script>

　

html

<form id="formname">
    <fieldset>
      <legend>送信内容を確認してください</legend>
      <label for="inputcheck">
        <input type="checkbox" id="inputcheck" name="inputName">これで大丈夫！
      </label>
      <div id="error-inputName"></div>
    </fieldset>
    <br>
    <button id="btnconfirm">送信する</button>
</form>

　
jQuery

// 
$(document).ready(function() {
  var formname = $("#formname").validate({
    rules: {
      inputName: {
        required: true,
      },
    },
    messages: {
      inputName: {
        required: "ちゃんと確認してください！",
      },
    },
    errorPlacement: function(error, element) {
      if (element.attr("name") == "inputName") {
        error.insertAfter("#error-inputName");
      } else {
        error.insertAfter(element);
      }
    },
  });

  // 送信ボタンの設定
  $('#btnconfirm').click(function(e) {
    e.preventDefault();
    var formId = "#formname";
    // 入力要素がある場合
    if ($(formId).length > 0) {
      if ($(formId).valid()) {
        if (confirm('本当に送信しますか？')) {
          formname.settings.submitHandler = function(form) { form.submit(); };
          $(formId).submit();
        }
      } else {
        formname.form();
        // エラーの最初の要素にフォーカス
        $(":input.error:first").focus();
      }
    } else {
      // 入力要素が無い（送信ボタンのみ）場合
      if (confirm('本当に送信しますか？')) {
        $(formId).submit();
      }
    }
  });
});
//

サンプルはこちら