ファイルとテキストエリアのjQuery検証

Question

現在、jQueryを使用して、テキストエリアまたはユーザーがアップロードしたファイルを検証しようとしています。誰かが次のページに移動することを許可してはならないのは、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関数は、両方がfalseでないことを確認しません。これは、ユーザーに次のページに行く唯一の時間です。

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/