模态框表单验证报错：$(...).valid() is not a function

核心问题：脚本引用顺序错误 #

jQuery Validate插件依赖jQuery核心库，必须先加载jQuery，再加载验证插件。你的当前引用顺序颠倒了，导致插件无法绑定到jQuery对象上，从而出现valid()方法不存在的错误。

修正后的脚本引用： #

<script src="~/Scripts/jquery-3.6.3.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>

完整实现步骤 #

1. 初始化表单验证规则 #

确保valid()方法调用在表单元素上（如果#insertmain是模态框容器，需找到内部的表单元素，比如#insertmain form），同时配置必填字段的验证规则：

$(document).ready(function() {
  // 给模态框内的表单绑定验证规则
  $('#insertmain form').validate({
    rules: {
      // 按字段name属性设置规则，示例：用户名必填
      username: {
        required: true
      },
      // 示例：邮箱必填且格式正确
      email: {
        required: true,
        email: true
      }
    },
    messages: {
      username: '请输入用户名',
      email: '请输入有效的邮箱地址'
    }
  });
});

2. 绑定保存按钮逻辑 #

结合Notiflix确认弹窗，实现“先验证→再确认→最后保存”的流程：

$('#saveBtn').click(function() {
  var $form = $('#insertmain form');
  
  // 先执行表单验证
  if ($form.valid()) {
    // 验证通过，弹出确认弹窗
    Notiflix.Confirm.show(
      '确认保存',
      '确定要保存这条记录吗？',
      '确认',
      '取消',
      function(){
        // 用户确认后执行保存逻辑
        $.ajax({
          url: '/your-save-api',
          type: 'POST',
          data: $form.serialize(),
          success: function(res) {
            Notiflix.Notify.success('保存成功！');
            $('#insertmain').modal('hide'); // 关闭模态框
          },
          error: function() {
            Notiflix.Notify.failure('保存失败，请重试');
          }
        });
      },
      function(){
        // 用户取消后的提示
        Notiflix.Notify.info('已取消保存');
      }
    );
  } else {
    // 验证不通过时的提示
    Notiflix.Notify.warning('请填写所有必填字段');
  }
});

额外排查点 #

• 检查jQuery Validate插件路径是否正确，确保脚本能正常加载
• 避免页面重复加载不同版本的jQuery，多版本冲突会导致插件绑定失效

内容的提问来源于stack exchange，提问作者Weboshii