2013-07-15 10 views
13

Voglio fare (un HTML) elemento di input 'file' obbligatorio: qualcosa di simileFare 'file' obbligatoria (richiesto)

<input type='file' required = 'required' .../> 

Ma non sta funzionando.

Ho visto questo manuale WW3 che afferma che l'attributo 'required' è nuovo in HTML 5. Ma non sto usando HTML 5 nel progetto che sto lavorando che non supporta la nuova funzione.

Qualche idea?

+0

Avrete bisogno di JavaScript. –

+0

@MadaraUchiha l'opzione javascript è anche buona. Per favore, dillo. – Bere

+0

Si prega di fornire più del file HTML. Suppongo tu abbia un pulsante di invio da qualche parte? Allegare una funzione javascript che asserisce se il campo di input del file è o meno vuoto e, se vuoto, restituire un messaggio di errore. – Tro

risposta

8

È possibile farlo utilizzando jQuery in questo modo: -

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#upload').bind("click",function() 
    { 
     var imgVal = $('#uploadfile').val(); 
     if(imgVal=='') 
     { 
      alert("empty input file"); 
      return false; 
     } 


    }); 
}); 
</script> 

<input type="file" name="image" id="uploadfile" size="30" /> 
<input type="submit" name="upload" id="upload" class="send_upload" value="upload" /> 
+0

Grazie. Ma la forma è complessa. Voglio che la mia soluzione sia indipendente da qualsiasi altro elemento (form) possibile.Non voglio usare (associare a) il pulsante 'invia' (o uno qualsiasi dei suoi attributi). C'è un altro modo? – Bere

+0

Puoi pubblicare la struttura del modulo? –

+0

Gli elementi e i relativi attributi sono definiti nel file XML Joomla. I nomi e gli id ​​degli elementi del modulo vengono modificati/manipolati dal CMS prima di essere visualizzati. Temo che se qualcuno cambia il nome dell'elemento di modulo indicato nell'XML, potrebbe essere generata una coppia nome/id completamente diversa. Di conseguenza, potrei perdere la connessione. Desidero almeno che l'elemento diventi indipendente dal fare affidamento specifico su altri elementi del modulo. – Bere

3
var imgVal = $('[type=file]').val(); 

Simile al suggerimento di Vivek, ma ora avete un selettore più generico del file di input e non si basano su specifiche ID o classe.

See this demo.

+1

Questa non è davvero una risposta alla domanda. – Pere

3

È possibile creare un polyfill eseguito sul modulo di invio. Ad esempio:

/* Attach the form event when jQuery loads. */ 
$(document).ready(function(e){ 

/* Handle any form's submit event. */ 
    $("form").submit(function(e){ 

     e.preventDefault();     /* Stop the form from submitting immediately. */ 
     var continueInvoke = true;   /* Variable used to avoid $(this) scope confusion with .each() function. */ 

     /* Loop through each form element that has the required="" attribute. */ 
     $("form input[required]").each(function(){ 

      /* If the element has no value. */ 
      if($(this).val() == ""){ 
       continueInvoke = false;  /* Set the variable to false, to indicate that the form should not be submited. */ 
      } 

     }); 

     /* Read the variable. Detect any items with no value. */ 
     if(continueInvoke == true){ 
      $(this).submit();    /* Submit the form. */ 
     } 

    }); 

}); 

Questo script attende che il modulo venga inviato, quindi cicli se ogni elemento forma con l'attributo required ha un valore immesso. Se tutto ha un valore, invia il modulo.

Un elemento di esempio da controllare potrebbe essere:

<input type="file" name="file_input" required="true" /> 

(È possibile rimuovere i commenti & minify questo codice quando lo si utilizza sul tuo sito web)

2

A partire da ora nel 2017, sono in grado fare questo-

<input type='file' required /> 

e quando si invia il modulo, si chiede per il file. Screenshot on Google Chrome

+0

Mi piace l'idea ma questo non ha alcun effetto nel mio caso (modulo in Laravel). Sfortunatamente:/ – daneczech

+0

@daneczech probabilmente non lo hai concluso con un tag '

'nel tuo' html' – Ibo

1

Grazie ad HTML5, è facile come questo:

<input type='file' required /> 

Esempio:

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

Problemi correlati