Evento onchange Javascript che impedisce l'evento onsubmit in formato HTML?

StackOverflow https://stackoverflow.com/questions/489527

Domanda

Prendi in considerazione un modulo HTML: 

<form action="" method="POST" onsubmit="return checkValidArray()">
    <input type="text" name="data" onchange="return validate(this);">
</form>

Sembra (in IE 6 e Firefox 3) che quando si digita del testo nel campo di input e si fa clic su Invia, l'evento onchange si attiva per il campo di input, ma l'evento onsubmit non viene attivato per il modulo fino a quando non si fa clic il pulsante di invio una seconda volta (a quel punto lo scambio non si attiva, ovviamente). In altre parole, lo scambio sembra impedire l'attivazione di onsubmit.

Il desiderio è quello di controllare ogni campo nel modulo quando l'utente esce dal campo per fornire loro un feedback di convalida immediato e anche per impedire l'invio del modulo se ci sono dati non validi.

[EDIT: nota che entrambe le funzioni di validazione contengono un avviso ().]

Come aggirare questo problema?

È stato utile?

Soluzione

Soluzione (di un tipo):

Si scopre che è solo la presenza di un avviso () - o di una conferma () - durante l'evento onchange dell'input che fa sì che l'evento onsubmit del modulo non si attivi. Il thread JS sembra essere bloccato dall'avviso ().
Per ovviare a questo problema, non includere alcun avviso () o confirm () nella chiamata onchange dell'ingresso.

Browser noti per essere interessati:
IE6 - Windows
IE8 - Win
FF3 - Win

Browser noti per non essere interessati:
Google Chrome - Win
Safari - Mac
FF - Mac

Altri suggerimenti

Ho provato con Firefox 3 (Mac) con il seguente codice: 

    <html>
        <head>
            <script>
                function validate(ele)
                {
                    alert("vali");
                    return false;
                }

                function checkValidArray()
                {
                    alert("checkValidArray");
                }

            </script>
        </head>
        <body>
            <form action="" method="POST" onsubmit="return checkValidArray()">
                <input type="text" name="data" onchange="return validate(this);">
                <input type="submit" value="Ok">
            </form>
        </body>
</html>

Sembra funzionare. Quando faccio clic sul pulsante OK, entrambi & Quot; Vali & Quot; e " Verifica matrice valida " apparire. Inizialmente ho pensato che return false potesse essere il motivo per cui il modulo non è stato inviato, ma è stato inviato (almeno, viene chiamato checkValidArray()).

Ora, cosa stai facendo con i tuoi metodi validate() e <=>? Qualcosa di speciale? Puoi pubblicare il codice?

EDIT: ho testato con IE8 e FF3 su Windows, e qui entrambi gli eventi non vengono generati. Non ho idea del perché. Forse onblur È una soluzione, ma PERCHÉ onchange non funziona? C'è un motivo specifico o è solo un'altra incoerenza? (Funziona sia su FF che su Safari su Mac)

È possibile utilizzare l'evento onblur nei propri input anziché onchange.

È abbastanza interessante che il comportamento sia diverso sul Mac, quindi sembra dipendente dalla piattaforma e non dal browser. Deve esserci un indizio da qualche parte ...

Ho provato onblur con il codice di Nivas ma ho avuto lo stesso risultato di onchange (solo " Vali " alert).

Ciò che fa la differenza è se si fa qualcosa in validate (). Commenta l'avviso di linea (& Quot; vali & Quot;); e funziona! (Il valore restituito effettivo da validate () non ha importanza, anche se non me lo sarei aspettato.)

EDIT: Un collega ha appena provato questo in Google Chrome su Windows e funziona lì. Ciò ha un senso intuitivo a causa del modo in cui Chrome separa i thread JS.

Qualcosa sul primo avviso () che blocca il thread provoca la perdita dell'evento onsubmit. Possibili condizioni di gara?

Non creare; pulsante di invio. Invece, crea un pulsante normale e scrivi una funzione che può essere chiamata onClick con quel pulsante.

La funzione eseguirà la convalida sui campi del modulo e, se tutto va bene, invierà il modulo. Altrimenti no. 

function validate
{
  "Piece of code to Validate your form"
  document.formName.action.value = "URL which you want to call"
 document.propFile.submit(); // It will submit he page
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top