Question

我目前正在尝试使用jQuery来验证textarea或用户上传的文件。唯一不允许某人进入下一页的时间是textarea和上传的文件isValid都是假的。

这是我的代码

    $(document).ready(function () {
$('#nomination-submit').click(function (e) {
    var fileValid = false;
    var textValid = true;
    $('textarea').each(function () {
        if ($.trim($(this).val()) == '') {
            textValid = false;
            //binds to onchange event of your input field
            $('file').bind('change', function () {
                var ext = $('#file').val().split('.').pop().toLowerCase();
                if ($.inArray(ext, ['pdf', 'doc', 'docx', 'rtf', 'txt']) == -1)
                { $('#fileExtension').slideDown("slow"); $('#fileSize').slideUp("slow"); fileValid = true; } else {
                    var filesize = (this.files[0].size);
                    if (filesize > 4194304)
                    { $('#fileSize').slideDown("slow"); fileValid = false; } else { fileValid = true; $('#fileSize').slideUp("slow"); }
                    $('#fileExtension').slideUp("slow"); $('#textOrFile').slideUp("slow");
                }
            })
        }
    })
    if (fileValid == false && textValid == false) {
        e.preventDefault();
        { $('#textOrFile').slideDown("slow"); }
    }
}) });

如果我这样，它将允许用户即使输入无效也可以转到下一页。出于某种原因，当我这样做或嵌套的if函数时，它不能确保两者都不是假的，这是我希望用户转到下一页的唯一时间。

Answer 1

将验证与动画分开。

假设这个标记：

<input type="submit" value="submit me" id="nomination-submit" />
<input type="file" id="fileMe" />
<textarea></textarea>
<textarea></textarea>
<textarea></textarea>
<textarea></textarea>

此代码：

$(document).ready(function() {
  var validMinSize = 4194304;
  var validTypes = ['pdf', 'doc', 'docx', 'rtf', 'txt'];

  $('#nomination-submit').on('click submit', function(e) {
    var fileValid = false;
    var textValid = false;
    var fileInput = $('#fileMe')[0];

    textValid =  $('textarea').filter(function() {
       return ($.trim($(this).val()) !== '');
    }).length == $('textarea').length;

    var fileTypeValid = checkFileType(fileInput);
    fileValid = fileTypeValid ? true : checkFileSize(fileInput);
    var allInvalid = (!fileValid && !textValid);
    if (allInvalid) {
      e.preventDefault();
      $('#textOrFile').slideDown("slow");
    }
    console.log("Check:" + fileTypeValid + ":" + fileValid + ":" + textValid + ":" + allInvalid);
  });

  $('#fileMe').on('change', function() {
    var fileInput = this;
    if (checkFileType(fileInput)) {
      $('#fileExtension').slideDown("slow");
      $('#fileSize').slideUp("slow");
    } else {
      if (checkFileSize(fileInput)) {
        $('#fileSize').slideDown("slow");
      } else {
        $('#fileSize').slideUp("slow");
      }
      $('#fileExtension').slideUp("slow");
      $('#textOrFile').slideUp("slow");
    }
  });

  function checkFileType(fileInput) {
    var fileValid = false;
    var ext = fileInput.value.split('.').pop().toLowerCase();
    if (!(validTypes.indexOf(ext) === -1)) {
      fileValid = true;
    }
    return fileValid;
  }

  function checkFileSize(fileInput) {
    var fileValid = false;
    fileValid = !!fileInput && !!fileInput.files[0] && !(fileInput.files[0].size <= validMinSize);
    return fileValid;
  }
});

修改代码：https://jsfiddle.net/MarkSchultheiss/71Lufcf2/2/

jQuery验证文件和文本区域

1 个答案: