2012-12-17 5 views
15

Używam bieżącej wersji jQuery (1.8.3) i najnowszej wersji jQuery validate (1.10.0), i wydaje się, że w Internecie Explorer 8, jquery validate sprawdza poprawność wszystkich danych wejściowych w sprawdzanym formularzu, a nie tylko tych o zdefiniowanych regułach. Działa dobrze w innych przeglądarkach (IE9 +, FF, Chrome) i działa dobrze, jeśli używam jQuery validate 1.9.0.jQuery Validate plugin v1.10 sprawdzanie poprawności (wymagające) wszystkich wejść w IE8

Oto przykład, który pokazuje problem:

<!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> 

w IE8, alert „przeszły walidację” nie będzie ogień, a pole opcjonalne zostaną oznaczone jako wymagane.

Gdybym wyraźnie zaznaczyć pole opcjonalne, ponieważ nie są wymagane, to nie działa prawidłowo:

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

Jednakże, jest to z pewnością suboptimal musiał oznaczyć każdy element wejściowy, który nie jest wymagany wyraźnie jako opcjonalne, i że nigdy nie był moim poprzednim wymaganiem, o ile wiem.

Wiem, że były problemy z wcześniejszymi wersjami jquery i jquery validate, ale zostały pozornie rozwiązane z jQuery validate 1.8.1 - Podnoszę ten problem, ponieważ wydaje się być z najnowszymi wersjami jquery i sprawdź wtyczkę.

UPDATE:

Tak, problem pojawia się tylko przejawiać się podczas korzystania z narzędzi programistycznych F12 Internet Explorer naśladować zachowanie IE8. Na podstawie komentarza sugerującego, że nie istniał faktyczny problem z próbką podaną w IE8, zbudowałem kompletną maszynę Windows VM z prawdziwą instalacją programu Internet Explorer 8 i w rzeczywistości nie było problemu. Chociaż istnieją oczywiście różnice między emulatorem a rzeczywistością, nigdy wcześniej nie widziałem takiego problemu z emulacją JavaScript i zostałem rzucony przez fakt, że nagle zaczęło się dziać z jQuery Validation 1.10.

Ponieważ jest to tylko problem z emulacją, a nie rzeczywistością, nie ma tu nic do rozwiązania; i powinienem był ujawnić, że to było przez emulator w pierwszej kolejności ... ale może ktoś inny wpadnie w tę samą pułapkę i będzie to użyteczne odniesienie.

+0

Kod działa dobrze dla mnie w IE8 http://jsfiddle.net/BGDfr/1/ – charlietfl

+1

nie wiesz, dlaczego używasz przycisku obsługi przycisku Wyślij do wywołania 'form()' może rozważyć użycie wywołania zwrotnego 'submitHandler' wstawionego – charlietfl

+1

Co @charlietf Powiedziałem. Wtyczka 'validate()' ma już wbudowaną funkcję 'submitHandler:'. Korzystając z własnej obsługi kliknięcia, niepotrzebnie ponownie zainicjujesz wtyczkę w formularzu. Widziałem wiele sytuacji, w których powoduje to różne dziwne kwestie, takie jak konieczność dwukrotnego kliknięcia przycisku, itp. – Sparky

Odpowiedz

0

Spróbuj to zamiast ...

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

Wygląda na to, że nie ma różnicy, czy użyto metody submitHandler - nie działa ona równo w emulatorze, a kończy się równie dobrze w prawdziwym IE8. Nie podążam za punktem ponownie inicjującym wtyczkę, gdy nie używam submitHandler (punkt z twojego komentarza powyżej). W każdym razie moja "rzeczywista" sprawa nie przesyła formularza - wystarczy przetestować jego ważność przed podjęciem kolejnej akcji ... tak, myślę, że submitHandler nie jest odpowiednią metodą wygody. –

+0

@KentMcNeill, Jeśli potrzebujesz tylko przetestować ważność formularza, właśnie do tego służy metoda ".valid()". 'if (form.valid())', itp. Oczywiście, jeśli testujesz poprawność po kliknięciu przycisku "submit", to właśnie jest to "submitHandler:", ponieważ jest ono uruchamiane tylko w momencie ważności. I za każdym razem, gdy wywołujesz '.validate()', ponownie weryfikujesz sprawdzanie poprawności w formularzu ... ponownie, jak wyjaśniłem, widziałem wiele dziwnych problemów zgłoszonych tutaj, które są spowodowane przez tę złą praktykę. Po prostu przejrzyj moje zaksięgowane/zaakceptowane odpowiedzi, aby zobaczyć co najmniej pół tuzina. – Sparky

Powiązane problemy