Validate Accepted

Validate Accepted

by Jeromy French

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <form method="post" id="whateveryouwant" onsubmit="return validateUploadSubmit();" class="form-horizontal">
    <div class="control-group">
      <label for="upload_file" class="control-label">File</label>
      <div class="controls">
        <input type="file" name="upload_file" id="upload_file" required="required" accept=".CSV,.TXT,.docx" />
        <span class="help-block">This input lets you choose CSV, TXT and DOCX documents; try to upload anything else.</span>
      </div>
    </div>
    <div class="form-actions">
      <input type="submit" value="submit form" class="btn btn-primary" data-validating-text="Validating..." data-loading-text="Uploading..." data-reset-text="Submit Form" />
    </div>
  </form>
</div>

JavaScript

var validate_file_type = function() {
    //limit the types of files that can be uploaded
    $('input[accept]').change(function() {
      //limit the types of files that can be uploaded to only those specified by the input's accept attribute; compare the whole string of the extension, without case-sensitivty
      var $changed_input = $(this),
        file_extension = $changed_input.val().match(/\.([^\.]+)$/)[1].toLowerCase(),
        allowed_extensions = new RegExp($changed_input.attr('accept').replace(/,/g, "$|^").replace(/\./g, "").toLowerCase());
      console.log('Is "' + file_extension + '" in "' + allowed_extensions + '"?');
      if (file_extension.match(allowed_extensions)) {
        $(this).closest('.control-group').removeClass('error');
      } else {
        $(this).closest('.control-group').addClass('error');
        alert('Please do not try to upload files with the extension "' + file_extension + '".');
        //remove the file input's value
        $(this).replaceWith($(this).val("").clone(true));
      };
    });
  },
  validateUploadSubmit = function() {
    "use strict"; //let's avoid tom-foolery in this function
    console.log('validating upload form');
    submitFlag = "";
    focusKey = "";

    var $submitting_button = $('form.form_enhanced').find(':input[data-loading-text]').button('validating').prop('disabled', true);
    trimInput();


    //HTML5's required attribute isn't available, so we need to shim it
    $(':input[required]').filter(function(index) {
      return this.value.length === 0;
    }).first().each(function() {
      var focusKey = $(this).prop('id'),
        label_text = $('label[for="' + focusKey + '"]').text();

      if (label_text.length !== 0) {
        submitFlag += "Please specify the " + label_text;
      }
    });

    if (!submitFlag.length) {
      //we're good, remove whitespace then let the submit happen!
      $submitting_button.button('loading');
      submit_action();
    } else {
      //something...