Können Sie ein Formular Einreichen, werden deaktiviert, wenn eine HTML-Datei-input-Feld leer ist?

In einer form, die enthält nur eine

<input id="fileInput" name="BugReport" type="file" />

Eingabe-Feld, ich möchte deaktivieren Sie die Schaltfläche Senden, wenn die Datei, die Eingabe leer ist (keine Datei gewählt wurde, noch). Gibt es eine empfohlene Weg, dies zu tun?

InformationsquelleAutor mjn | 2011-10-22
  1. 2

    Fügen Sie die required - Attribut zum input. Es wird nur in Browsern, die es unterstützen, so sollten Sie einen JavaScript-alternative (<form onSubmit="if(document.getElementById('fileinput').value == '') return false;"> oder etwas entlang jenen Linien).

    InformationsquelleAutor Niet the Dark Absol
  2. 0

    Überprüfen, ob die Datei input-Wert sollte immer funktionieren.

    if (document.getElementById("fileInput").value == "") .....

    den wahren Pfad der Datei werden unkenntlich gemacht, aus Gründen der Sicherheit, aber der Wert sollte immer wieder etwas, wenn eine Datei ausgewählt ist.

    InformationsquelleAutor Pekka supports GoFundMonica
  3. 0

    Die Sie tun können, es mit JavaScript. Der folgende code setzt Voraus, Sie haben eine id von "s" auf den submit-button des Formulars:

    document.getElementById("fileInput").onchange = function() {
    if(this.value) {
        document.getElementById("s").disabled = false; 
    }  
}

    Offensichtlich, Sie brauchen, um den Absenden-button deaktiviert, um zu beginnen. Zum Beispiel:

    <input type="submit" id="s" disabled>
    InformationsquelleAutor James Allardice
  4. 0

    Mit das der beste Weg ist, um Javascript-Validierung aller Eingaben, die als Sie geändert werden. So wie der input verändert wird (man kann das auf change-Ereignis) in Javascript-aktivieren oder deaktivieren der Schaltfläche je.

    <input id="fileInput" name="BugReport" type="file" onchange="validateForm()"/>

    Diese sollten rufen Sie die javascript-Schaltfläche, die der Eingang zu überprüfen ist, es hat eine gültige Datei und wenn ja, aktivieren Sie die Schaltfläche senden.

    InformationsquelleAutor Richard Stokes
  5. 0

    Können Sie dies mit jQuery 

    <script src="/Scripts/jquery-1.5.1.js" type="text/javascript"></script>

<script>
    $(function () {
        $('#submit').attr("disabled", true);

        $('#fileInput').change(function () {
            if ($('#fileInput').val().length == 0)
                $('#submit').attr("disabled", true);
            else
                $('#submit').attr("disabled", false);
        });
    });
</script>

<input id="fileInput" name="BugReport" type="file" />
<input id="submit" type="submit" />

    hoffe, das hilft

    InformationsquelleAutor dknaack
  6. 0

    ja, Sie können etwas hinzufügen, wie:

    <input type="submit" onclick="if (window.getElementById('fileInput').value == '') return false" />

    oder beginnen Sie mit einem submit-button deaktiviert und aktivieren es, wenn die input-Datei angeklickt wird, der Wert anders ist als der leere string.

    überprüfen das jsbin, um zu sehen, welchen Wert ein file-input ist (seine ein "fakepath" und den Namen der Datei)

    InformationsquelleAutor Ben
  7. 0

    Wenn Sie mithilfe von HTML5 fügen Sie einfach erforderlich innen input-tag:

    <input type='file' required />

    Beispiel:

    HTML:

    <form>
  <input type='file' required />
  <button type="submit"> Submit </button>
</form>

    InformationsquelleAutor Ibo
Schreibe einen Kommentar