对文件和文本区域的jQuery验证

Question

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

这是我的代码有

$(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/