jQuery Validierung für Datei und Textbereich

Question

Ich versuche derzeit jQuery zu verwenden, um eine Textarea oder eine Datei, die von einem Benutzer hochgeladen wurde, zu überprüfen. Die einzige Zeit, die es niemandem erlauben sollte, auf die nächste Seite zu gehen, ist, wenn sowohl textarea als auch die hochgeladene Datei isValid false ist.

Dies ist der Code, den ich

$(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"); } 
    } 
}) }); 

haben, wenn ich es so haben es der Benutzer auf die nächste Seite, wo noch gehen zu lassen, wenn die Eingabe ungültig ist. Aus irgendeinem Grund, wenn ich dies mache oder eine verschachtelte if-Funktion, stellt es nicht sicher, dass beide nicht falsch sind, was der einzige Zeitpunkt ist, zu dem der Benutzer zur nächsten Seite gehen soll.

Answer 1

Erstellen Sie eine Trennung Ihrer Validierung von der Animation.

Angenommen, dieses Markup:

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

Dieser Code:

$(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; 
    } 
}); 

Fiddle mit dem überarbeiteten Code: https://jsfiddle.net/MarkSchultheiss/71Lufcf2/2/