2012-12-17 4 views
15

sto usando la versione corrente di jQuery (1.8.3) e l'ultima versione di jQuery convalidare (1.10.0), e sembra che in Internet Explorer 8, jquery validate sta convalidando tutti gli input sul modulo in fase di convalida, non solo quelli con regole definite. Funziona perfettamente con altri browser (IE9 +, FF, Chrome), e funziona bene se uso jQuery per convalidare 1.9.0.jQuery Plugin Convalida v1.10 validazione (richiede) tutti gli ingressi in IE8

Ecco un esempio che illustra il problema:

<!DOCTYPE html> 

<html> 
<head> 
    <title>IE8 + jQuery Validate 1.10 Test</title> 
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script> 
    <script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js'></script> 
</head> 
<body> 
    <div> 
     <form id="my-form"> 
      <label for="my-required-field">required:</label> 
      <input id="my-required-field" type="text" name="reqField" /> 
      <label for="my-optional-field">optional:</label> 
      <input id="my-optional-field" type="text" name="optField" /> 
      <input id="wh-submit-button" type="submit" value="submit" /> 
     </form> 
    </div> 
    <script type="text/javascript"> 
     $(document).ready(function() { 

      var form = $("#my-form"); 
      var validator = form.validate({ 
       rules: { 
        "reqField": { required: true } 
       }, 
       messages: { 
        "reqField": { required: "this field is <i>actually</i> required" } 
       } 
      }); 

      $("#wh-submit-button").click(function() { 
       if (validator.form()) { 
        alert('passed validation'); 
       } 
      }); 
     }); 
    </script> 
</body> 
</html> 

in IE8, l'avviso "validazione passato" non sparare, e il campo facoltativo sarà contrassegnato come richiesto.

Se io marco esplicitamente il campo facoltativo come non richiesto, non funziona correttamente:

rules: { 
    "reqField": { required: true }, 
    "optField": { required: false } 
} 

Tuttavia, è certamente non ottimale di dover marcare ogni elemento di input che non è richiesto esplicitamente come optional, e che non è mai stato un requisito precedente, per quanto ne so.

So che c'erano problemi con le versioni precedenti di jquery e jquery validate, ma erano apparentemente risolti con jQuery validate 1.8.1 - Sto sollevando questo problema poiché sembra che sia con le ultime versioni di jquery e convalidare plugin.

UPDATE:

Quindi, la questione appare solo di manifestarsi quando si utilizzano gli strumenti di sviluppo di Internet Explorer F12 per emulare il comportamento IE8. Sulla base del commento che suggeriva che non c'era alcun problema con l'esempio fornito in IE8, ho creato una macchina virtuale Windows completa con una vera installazione di Internet Explorer 8 e, in effetti, non c'era alcun problema. Sebbene ci siano ovviamente delle differenze tra un emulatore e la cosa reale, non avevo mai visto un problema simile con l'emulazione JavaScript precedente, ed è stato gettato dal fatto che improvvisamente ha iniziato a verificarsi con jQuery Validation 1.10.

Poiché si tratta di un problema solo con l'emulazione, non è la cosa reale, non c'è nulla da risolvere qui; e avrei dovuto scoprire che era tramite l'emulatore in primo luogo ... ma forse qualcun altro cadrà nella stessa trappola e questo sarà un riferimento utile.

+0

funziona bene per me in IE8 http://jsfiddle.net/BGDfr/1/ – charlietfl

+1

non sono sicuro del motivo per cui si utilizza il gestore di clic del pulsante di invio per chiamare 'form()' potrebbe prendere in considerazione l'uso del callback 'submitHandler' – charlietfl

+1

Cosa @charlietf ho detto Il plugin 'validate()' ha già un 'submitHandler:' integrato per questo. Utilizzando il proprio gestore di clic, si reinizializza il plug-in sul modulo inutilmente. Ho visto molte situazioni in cui questo causa tutti i tipi di problemi strani come dover fare clic sul pulsante due volte, ecc. – Sparky

risposta

0

Prova questo codice invece ...

jsFiddle DEMO using built-in jQuery 1.8.2

jsFiddle DEMO using jQuery 1.8.3

$(document).ready(function() { 

    var form = $("#my-form"); 
    var validator = form.validate({ 
     rules: { 
      "reqField": { 
       required: true 
      } 
     }, 
     messages: { 
      "reqField": { 
       required: "this field is <i>actually</i> required" 
      } 
     }, 
     submitHandler: function(form) { 
      alert('passed validation'); 
      // form.submit(); 
     } 
    }); 

});​ 
+0

Sembra non fare alcuna differenza se viene usato o meno submitHandler - fallisce ugualmente nell'emulatore, e riesce ugualmente in un vero IE8. Non seguo il punto reinizializzando il plugin quando non si utilizza submitHandler (il punto del tuo commento sopra). In ogni caso, il mio caso "reale" non presenta il modulo - ho solo bisogno di testarne la validità prima di intraprendere un'altra azione ... quindi, penso che submitHandler non sia il metodo di convenienza giusto. –

+0

@KentMcNeill, Se hai solo bisogno di testare la validità del modulo, questo è ciò che il metodo '.valid()' è per. 'if (form.valid())', ecc. Ovviamente, se stai testando la validità dopo aver fatto clic sul pulsante 'submit', questo è ciò che' submitHandler: 'è per, poiché si attiva solo sulla validità. E ogni volta che chiami '.validate()', reinizializzi la convalida sul modulo ... di nuovo, come ho spiegato, ho visto molti problemi strani qui riportati che sono causati da questa pratica scarsa. Cerca le mie risposte pubblicate/accettate per vederne almeno una mezza dozzina. – Sparky