1. 官網：https://jqueryvalidation.org/

  2. 使用方法參考：https://www.runoob.com/jquery/jquery-plugin-validate.html

  3. HTML主架構

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- jquery -->
  <script src="<https://code.jquery.com/jquery-3.6.2.min.js>" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>
  <!-- Bootstrap CSS -->
  <link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <!-- Bootstrap Bundle with Popper -->
  <script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js>" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
  <title>###</title>
</head>
<body>
  <div class="container">
    <div class="d-none my-5" id="show">
      <span>資料處理中....<img src="<https://i.imgur.com/pm9SKUg.gif>"></span>
    </div>
    <div id="main">
      <!-- 原始碼 -->
      <!-- 套件引入 -->
      <!-- 調用函數 -->
    </div>
  </div>
</body>
</html>

  4. 表單

    <form action="" id="myForm" class="mb-5" method="POST">
  <div class="row">
    <input type="hidden" name="sn" id="sn" value="">
    <input type="hidden" name="timestamp" id="timestamp" value="">

    <div class="col-sm-6 mb-3">
      <label>
        姓名 <span class="text-danger"> *</span> </label>
      <input type="text" class="form-control" name="f-3" id="f-3" value="">
    </div>

    <div class="col-sm-6 mb-3">
      <label>
        電話 </label>
      <input type="text" class="form-control" name="f-4" id="f-4" value="">
    </div>

    <div class="col-sm-12 mb-3">
      <label>
        email <span class="text-danger"> *</span> </label>
      <input type="text" class="form-control" name="f-5" id="f-5" value="">
    </div>

    <div class="col-sm-12 mb-3">
      <label>
        聯絡事項 <span class="text-danger"> *</span> </label>
      <textarea class="form-control" name="f-6" id="f-6" rows="3"></textarea>
    </div>

    <input type="hidden" name="f-7" id="f-7" value="">

  </div>

  <div class="row">
    <input type="hidden" name="op" id="op" value="">
    <input type="hidden" name="ofsn" id="ofsn" value="1">

    <div class="col-sm-12">
      <button id="submit" type="submit" class="btn btn-primary w-100">送出</button>
    </div>
  </div>
  
</form>

  5. 套件引入 請檢查 「jquery.js」是否已引用

    <script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js>"></script>
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/localization/messages_zh_TW.min.js>"></script>

  6. 調用函數

    <style>
  .error{
    color:red;
  }
</style>
<script>
	$(function(){
		$("#myForm").validate({
			submitHandler: function(form, event) {//驗證成功執行
        //防止重覆送出
        $('#submit').attr('disabled', true);
        // 阻止表格正常提交
        event.preventDefault();

        document.getElementById('show').setAttribute("class", "my-5");
        document.getElementById('main').setAttribute("class", "d-none");
 
        alert('表單處理，請重整再測試');

        //document.getElementById('show').setAttribute("class", "d-none");
        //document.getElementById('main').setAttribute("class", "my-5");

				return false;
			},
			rules: {
        'f-3': { required: true },
        'f-5': { required: true, email : true},
        'f-6': { required: true }			},
			messages: {
        'f-3': { required: '必填' },
        'f-5': { required: '必填', 
        email : 'email格式不正確'},
        'f-6': { required: '必填' }}
		});
	});
</script>