表单验证正常却无法提交，控制台提示isValid()不是函数

问题根源 #

你同时使用了Parsley和JustValidate两个表单验证库，且错误调用了JustValidate不存在的isValid()同步方法——JustValidate并没有这个方法，这就是控制台报错的直接原因。另外同时用两个验证库容易引发冲突，建议只保留其中一个。

解决方案一：仅使用JustValidate完成验证与提交 #

JustValidate的验证结果需要通过异步方式获取，你可以用它的validate()方法（返回Promise）或者onSuccess回调来处理提交逻辑。

修改后的代码： #

// 移除Parsley的初始化代码，只保留JustValidate
var addvalidation = new JustValidate('#saveStudent');

addvalidation.addField('#poster', [{
  rule: 'files',
  value: {
    files: {
      extensions: ['jpeg', 'png', 'jpg'],
      types: ['image/jpeg', 'image/png', 'image/jpg'],
    },
  },
  errorMessage: '仅支持jpeg、jpg、png格式的图片。',
}]);

$(document).on('submit', '#saveStudent', async function (e) {
  e.preventDefault();
  var formData = new FormData(this);
  formData.append("save_student", true);
  
  // 调用JustValidate的validate方法，异步获取验证结果
  const isValid = await addvalidation.validate();
  if (isValid) {
    $.ajax({
      type: "POST",
      url: "save.php",
      data: formData,
      processData: false,
      contentType: false,
      success: function (response) {
        $('#addMovie').show();
        $('#studentAddModal').modal('hide');
        $('#saveStudent')[0].reset(); // 修正原代码中多余的`your text`
        $('#myTable').load(location.href + " #myTable");
      }
    });
  }
});

更贴合JustValidate设计的写法（用onSuccess回调）： #

var addvalidation = new JustValidate('#saveStudent');

addvalidation
  .addField('#poster', [{
    rule: 'files',
    value: {
      files: {
        extensions: ['jpeg', 'png', 'jpg'],
        types: ['image/jpeg', 'image/png', 'image/jpg'],
      },
    },
    errorMessage: '仅支持jpeg、jpg、png格式的图片。',
  }])
  // 验证通过时触发的回调
  .onSuccess(function(event) {
    event.preventDefault();
    var form = event.target;
    var formData = new FormData(form);
    formData.append("save_student", true);
    
    $.ajax({
      type: "POST",
      url: "save.php",
      data: formData,
      processData: false,
      contentType: false,
      success: function (response) {
        $('#addMovie').show();
        $('#studentAddModal').modal('hide');
        form.reset();
        $('#myTable').load(location.href + " #myTable");
      }
    });
  });

解决方案二：仅使用Parsley完成验证与提交 #

如果你更习惯用Parsley，可以移除JustValidate的代码，用Parsley的原生规则处理文件验证：

修改后的代码： #

// 初始化Parsley
$('#saveStudent').parsley();

// 给文件上传框添加Parsley验证规则
$('#poster').attr({
  'data-parsley-fileextension': 'jpeg,png,jpg',
  'data-parsley-filemimetype': 'image/jpeg,image/png,image/jpg',
  'data-parsley-error-message': '仅支持jpeg、jpg、png格式的图片。'
});

$(document).on('submit', '#saveStudent', function (e) {
  e.preventDefault();
  var form = this;
  var formData = new FormData(form);
  formData.append("save_student", true);
  
  // 触发Parsley验证并判断结果
  $(form).parsley().validate();
  if ($(form).parsley().isValid()) {
    $.ajax({
      type: "POST",
      url: "save.php",
      data: formData,
      processData: false,
      contentType: false,
      success: function (response) {
        $('#addMovie').show();
        $('#studentAddModal').modal('hide');
        form.reset();
        $('#myTable').load(location.href + " #myTable");
      }
    });
  }
});

额外修正 #

原代码中$('#saveStudent')[0].your textreset();是笔误，需删除多余的your text，改为$('#saveStudent')[0].reset();

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