Files validation

It's possible to validate min/max count of uploaded files and check for type, extension, min/max size and name of uploaded files.

Uploaded files count

<input type="file" name="file" id="file" multiple />

validation.addField('#file', [
  {
    rule: 'minFilesCount',
    value: 1,
  },
  {
    rule: 'maxFilesCount',
    value: 3,
  },
]);

File attributes validation

<input type="file" name="file" id="file" />

validation.addField('#file', [
  {
    rule: 'file',
    value: {
      files: {
        extensions: ['jpeg', 'png'],
        maxSize: 25000,
        minSize: 1000,
        types: ['image/jpeg', 'image/png'],
        names: ['file1.jpeg', 'file2.png'],
      },
    },
  },
]);

where files field in value could be:

{
  files: {
    extensions?: string[],
    types?: string[],
    minSize?: number,
    maxSize?: number,
    names?: string[],
  }
}

info

minSize and maxSize should be defined in bytes.

Demo

Upload 1-3 files

Upload 1 png file

Upload several png/jpg/jpeg files with min size 10kb and max size 25kb

Check out the code

HTML

<form id="files_form" autocomplete="off" novalidate="novalidate">
  <div class="control-wrapper">
    <div class="control-wrapper">
      <label class="input-label" for="files_minmax">Upload 1-3 files</label>
      <div class="input-wrapper">
        <input
          id="files_minmax"
          class="input"
          autocomplete="off"
          type="file"
          multiple=""
        />
      </div>
    </div>
  </div>
  <div class="control-wrapper">
    <div class="control-wrapper">
      <label class="input-label" for="files_png">Upload 1 png file</label>
      <div class="input-wrapper">
        <input id="files_png" class="input" autocomplete="off" type="file" />
      </div>
    </div>
  </div>
  <div class="control-wrapper">
    <div class="control-wrapper">
      <label class="input-label" for="files_attr"
        >Upload several png/jpg/jpeg files with min size 10kb and max size
        25kb</label
      >
      <div class="input-wrapper">
        <input
          id="files_attr"
          class="input"
          autocomplete="off"
          type="file"
          multiple=""
        />
      </div>
    </div>
  </div>
  <div class="control-wrapper">
    <button type="submit" class="button">Submit</button>
  </div>
</form>

JS

const validator = new JustValidate('#files_form');

validator
  .addField('#files_minmax', [
    {
      rule: 'minFilesCount',
      value: 1,
    },
    {
      rule: 'maxFilesCount',
      value: 3,
    },
  ])
  .addField('#files_png', [
    {
      rule: 'minFilesCount',
      value: 1,
    },
    {
      rule: 'maxFilesCount',
      value: 1,
    },
    {
      rule: 'files',
      value: {
        files: {
          types: ['image/png'],
          extensions: ['png'],
        },
      },
    },
  ])
  .addField('#files_attr', [
    {
      rule: 'minFilesCount',
      value: 1,
    },
    {
      rule: 'files',
      value: {
        files: {
          extensions: ['jpeg', 'jpg', 'png'],
          maxSize: 20000,
          minSize: 10000,
          types: ['image/jpeg', 'image/jpg', 'image/png'],
        },
      },
    },
  ]);