Question

我是前端验证的新手，所以我希望在这里提供一点帮助。我在提交前使用 JQuery Validate Plugin 来验证我的表单。以下是我的表格的简短示例：

＆＃13;

<form method="POST" action="{{ route('employees.store') }}" name="createEmployeeForm" enctype="multipart/form-data">
  <input name="_token" type="hidden" value="{{ csrf_token() }}" />
  <input type="text" id="FirstName" name="FirstName">
  <input type="text" id="LastName" name="LastName">
  <input type="file" id="employee-image" name="employee_image">
  <button id="submit_btn" type="submit">Submit</button>
</form>

＆＃13;

我在输入中添加了一组规则＆＃34; FirstName和LastName＆＃34;。当我按下＆＃34;提交＆＃34;按钮它在提交之前首先验证表格良好，但是在我添加规则和自定义验证方法（输入类型＆＃34;文件＆＃34;）后，表单将提交给服务器 - 方面，没有先前的验证。这是我的js：

＆＃13;

$(document).ready(function() {
      $.validator.addMethod('filesize', function(value, element, param) {
        return this.optional(element) || (element.files[0].size <= param)
      });
      $("form[name='createEmployeeForm']").validate({
          rules: {
            FirstName: "required",
            LastName: "required",
            employee_image: {
              accept: "jpg,png,jpeg,gif",
              filesize: 1048576
            }
          },
          // Specify validation error messages
          messages: {
            employee_image: {
              accept: "uploaded file should have an image-extension : jpg,png,jpeg,gif and less than 1 MB "
            },
            submitHandler: function(form) {
              form.submit();
            }
          });
      });

＆＃13;

我尝试在提交按钮上阻止默认并在提交处理程序中返回false，但似乎没有任何结果，我也不想通过ajax提交表单。 指导表示赞赏

Answer 1

“accept”方法作为附加组件提供，这就是为什么应该包含附加方法文件的原因，如文档中所述：

作为附加组件提供了更多方法，目前包含这些方法   在下载包中的additional-methods.js中。并非所有人都是   记录在这里：

accept - 使文件上传仅接受指定的mime-types   creditcard - 使元素需要信用卡号。
  extension - 使元素需要特定的文件扩展名。
  phoneUS - 验证有效的美国电话号码   require_from_group - 确保组中给定数量的字段完整。

参考：JQuery Validate Documentation

JQuery-Validate插件：在向输入＆＃34;文件＆＃34;添加规则时，我的表单被提交。

1 个答案: