问题描述

在AdminLTE3中JQuery Validation表单验证select时，发现当select下拉选择值改变时没触发验证，也就是点击提交按钮触发表单验证后，select下方显示的错误验证信息在select值改变后没有消失，只有当select失去焦点后才消失。

解决方法

查阅JQuery Validation官方文档没有相关的配置项，最后只能通过监听select的change事件，并在此时调用表单验证方法来触发表单验证。

示例代码

$addOrUpdateForm.validate({
  rules: {
      name: 'required',
      type: 'required'
  },
  messages: {
      name: '请输入名称',
      type: '请选择类型'
  },
  errorElement: 'span',
  errorPlacement: function (error, element) {
      error.addClass('invalid-feedback')
      element.closest('div').append(error)
  },
  highlight: function (element, errorClass, validClass) {
      $(element).removeClass('is-invalid').addClass('is-invalid')
  },
  unhighlight: function (element, errorClass, validClass) {
      $(element).removeClass('is-invalid')
  },
  submitHandler: function () {
      const formData = form2json('#mainEditForm')
      ajax_request(requestUrl, formData, 'POST', () => {
          $addOrUpdateFormModal.modal('hide')
          refreshTable(formData.id ? false : true)
      })
  }
});

// 监听select的change事件，并在此时调用表单验证方法来触发表单验证
$addOrUpdateForm.find('select').change(function () {
  $addOrUpdateForm.valid()
})