Gestire campi obbligatori in un form html5

di il
8 risposte

Gestire campi obbligatori in un form html5

Un saluto a tutto il forum,
ho un problema con la gestione dei campi obbligatori presenti all'interno di un modulo form html5, in tutta sostanza nonostante abbia inserito in tutti i tag che mi serve l'obbligo di compilazione l'attributo required, questo sembra completamente essere eluso e a quanto pare il problema è generato da una conferma di invio modulo che ho inserito a fine form, tale conferma contiene del codice javascript che altro non fa che chiedere all'utente se è sicuro che vuole procedere con la registrazione delle informazioni compilate.

Il form lo apro in questo modo:

<form class="form" method="post" id="modulo" action="index.php?page=salva_commessa" enctype="multipart/form-data">


Questo è uno dei campi che dovrebbe essere validato

	<div class="col-md-4">
		<div class="input-group">
			<span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>
			<input type="text" class="form-control" aria-hidden="true" name="cliente" placeholder="Nome Cognome Cliente" required="required">
		</div>
	</div>
Questo il codice che mi fa inviare il form a seguito di conferma da parte dell'utente

<div class="text-right">
<button type="button" class="btn btn-success right" onclick="if(confirm('Vuoi registrare la commessa ?')){this.form.submit();}">                        Registra commessa</button>
</div>
Persone più esperte di me afferrmano che un form che nel submit contiene codice javascript non può verificare prima dell'invio se i campi obbligatori sono effettivamente valorizzati oppure no.

Mi dareste una mano per comprendere come ovviare il problema senza stravolgere tutto il form che tra le altre cose è anche abbastanza lungo ?

Grazie anticipatamente

8 Risposte

  • Re: Gestire campi obbligatori in un form html5

    Dai un'occhiata qui :

    https://www.w3schools.com/js/js_validation.as
  • Re: Gestire campi obbligatori in un form html5

    Buonasera @magicsign,
    avevo già provato quanto suggerito dalla documentazione del w3schools
    
    <script type="text/javascript" src="js/validate.js"></script>
    <?php include("js/cavicchi.js"); ?>
    <form class="form" name="inscomm" method="post" id="modulo" action="index.php?page=salva_commessa" onsubmit="return validateForm()" enctype="multipart/form-data">
    
    ma lo script validate.js non viene proprio preso in considerazione
    
    function validateForm() {
        var x = document.forms["inscomm"]["cliente"].value;
        if (x == "") {
          alert("Il campo cliente è obbligatorio");
          return false;
        }
      }
    
    ed il mio dubbio si focalizza anche sulla chiusura dello script quello presente nel button e che se cliccato invia il form ovvero
    this.form.submit();
    
    <button type="button" class="btn btn-success right" onclick="if(confirm('Vuoi registrare la commessa ?')){this.form.submit();}">Registra commessa</button>
    
  • Re: Gestire campi obbligatori in un form html5

    ccuomo ha scritto:


    nonostante abbia inserito in tutti i tag che mi serve l'obbligo di compilazione l'attributo required, questo sembra completamente essere eluso e a quanto pare il problema è generato da una conferma di invio modulo che ho inserito a fine form, tale conferma contiene del codice javascript che altro non fa che chiedere all'utente se è sicuro che vuole procedere con la registrazione delle informazioni compilate.
    Se il tuo obiettivo è quello di ottenere la segnalazione di errore per il campo non compilato prima della richiesta di conferma a procedere con l'inserimento della commessa, il codice non è corretto.

    Devi tenere presente che la verifica dei campi compilati e degli attributi di validazione come required avviene al momento del submit del form: questo non viene eseguito se mancano alcuni campi.

    Nel tuo codice, il submit viene invocato al click sul pulsante e ad avvenuta conferma, quindi sarà naturale che la pagina richieda prima la conferma a procedere con l'inserimento, e poi visualizzi gli errori di validazione se presenti, bloccando di fatto il submit.

    Comunque, giusto per chiarire, il comportamento che ti aspetti precisamente qual è?
  • Re: Gestire campi obbligatori in un form html5

    Buongiorno Alka e anzitutto grazie per la risposta,
    io vorrei che quando viene invocato il submit cliccando sul pulsante, venisse fuori (cosi come accade adesso) la richiesta di conferma a procedere, ma se i campi obbligatori non sono valorizzati il sistema riporti l'utente nella form evidenziando i campi obbligatori non valorizzati oppure mi starebbe bene qualsiasi altra alternativa l'importante che vengano valorizzati tutti i campi obbligatori.

    Grazie
  • Re: Gestire campi obbligatori in un form html5

    se i campi obbligatori non sono valorizzati il sistema riporti l'utente nella form evidenziando i campi obbligatori non valorizzati oppure mi starebbe bene qualsiasi altra alternativa l'importante che vengano valorizzati tutti i campi obbligatori.
    Questo dovrebbe già avvenire.

    Cosa succede adesso se i campi che hai contrassegnato come required non sono compilati?
    Il form viene inviato ugualmente anche se non è stato specificato un valore per il campo?

    Sei sicuro che il browser in uso sia recente e abbia il supporto per questi attributi? (improbabile, ma non si sa mai...)
  • Re: Gestire campi obbligatori in un form html5

    No, non avviene e posso assicurarti che il form l'ho testato con tutti i browser, addirittura con il browser brave.
    Sto uscendo pazzo, ma persone che ne sanno più di me attribuiscono il problema al codice presente nel <button>
    affermando che è normale che se ho un codice js nel submit vengono elusi tutti i controlli sui campi

    Possibile con tutta questa tecnologia non si riesca ad effetturare una verifica dei campi obbligatori prima della registrazione ?
    
    <button type="button" class="btn btn-success right" onclick="if(confirm('Vuoi registrare la commessa ?')){this.form.submit();}">Registra commessa</button>
    
  • Re: Gestire campi obbligatori in un form html5

    No, non avviene e posso assicurarti che il form l'ho testato con tutti i browser, addirittura con il browser brave.
    Sto uscendo pazzo, ma persone che ne sanno più di me attribuiscono il problema al codice presente nel <button>
    affermando che è normale che se ho un codice js nel submit vengono elusi tutti i controlli sui campi
    No, il problema è un altro: quando chiami il metodo submit() di fatto forzi l'invio dei dati a prescindere dallo stato di validazione, che quindi non viene controllato.

    Prova a modificare il codice come segue:
    
    <form class="form" method="post" id="modulo" action="index.php?page=salva_commessa" enctype="multipart/form-data">
      <div class="col-md-4">
        <div class="input-group">
          <span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>
          <input type="text" class="form-control" aria-hidden="true" name="cliente" placeholder="Nome Cognome Cliente" required>
        </div>
      </div>
      <div class="text-right">
        <button type="submit" class="btn btn-success right" onclick="return confirm('Vuoi registrare la commessa ?')">Registra commessa</button>
      </div>
    </form>
    
    In pratica, il tuo <button> deve diventare di tipo "submit", così quando viene premuto il browser comprende il tuo intento ma, prima di procedere con l'invio, effettua la validazione dei campi.

    Se la conferma di registrazione della commessa vuoi ottenerla prima della validazione, allora codifichi l'evento onclick del pulsante così come indicato sopra: in pratica, quando fai clic, se decidi di non proseguire viene annullato l'effetto predefinito del pulsante, ossia l'esecuzione del submit.

    Se invece vuoi ottenere la conferma di registrazione dopo la validazione dei campi - che secondo me è un'alternativa migliore - allora puoi spostare il codice dell'onclick all'interno dell'evento onsubmit del <form>. Così facendo, fino a quando ci sono campi non validi, il browser blocca il submit e ti segnala gli errori; quando i campi sono tutti corretti, il browser procede ma chiede prima la conferma di registrazione e, se tutto va a buon fine e la conferma viene data, allora il form viene spedito.

    Ciao!
  • Re: Gestire campi obbligatori in un form html5

    Sinceramente non penso che senza il vostro supporto sarei riuscito a risolvere il problema, adesso il form si comporta esattamente come mi aspettavo. Quindi grazie di tutto cuore per il prezioso intervento e soprattutto per l'impegno profuso nell'aiutare una persona che come sicuramente avete compreso, di mestiere non fa il programmatore, ma è molto affascinato da tale mondo. Nella vita, sono sistemista informatico, ma grazie al supporto di persone come voi, posso provare a dar vita ad un percorso di apprendista programmatore.

    Ancora grazie

Devi accedere o registrarti per scrivere nel forum
8 risposte