12-3 表單驗證

一、參考網站

https://jqueryvalidation.org/

https://www.runoob.com/jquery/jquery-plugin-validate.html

二、使用方法
 

// 引入：
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script> 
// 調用：
$("#myForm").validate()

三、範例
 

<!-- 表單驗證 start -->
<style>
  .error{
  color:red;    
}
</style>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script> 
<script>
  $(function(){

    $("#myForm").validate({
      submitHandler: function(form) {//驗證成功執行
        //insertData(); 
        form.submit();
        return false;           
      },
      rules: {//驗證規則
        '商品類別': {required: true }
      },
      messages: {//驗證訊息
        '商品類別': {required: '必填' }
      }
    });

  });
  
  function insertData(){
    console.log("end");
  }
</script>
<!-- 表單驗證 end -->