[JQuery] Validatie plugin werkt niet in IE - Softwareontwikkeling

vrijdag 29 augustus 2008 18:32

Acties:

Topicstarter

Hey,

Onlangs ben ik bezig geweest met JQuery, en dan met name met de Validatie plugin (http://bassistance.de/jqu...jquery-plugin-validation/). Nu werkt alles naar behoren in Firefox, echter werkt de volledige validatie plugin niet in IE (zowel 6 als 7).

Een werkend voorbeeld die zowel werkt in IE als in Firefox (http://jquery.bassistance.de/validate/demo/milk/). Ik heb alles nagelopen in dit voorbeeld, maar ik zie niet wat ik anders doe.

Hieronder kort een aantal codes:

HTML:

<html>
<head>
<script src="js/lib/jquery.js" type="text/javascript"></script>
<script src="js/validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() { 
    // validate signup form on keyup and submit 
    var validator = $("#form1").validate({ 
        rules: { 
            naam: "required", 
            email: { 
                required: true, 
                email: true, 
            }, 
            telefoon: {
                required: false,
                number: true,
                minlength: 10,
            }
        }, 
        messages: { 
            naam: "Niet ingevuld", 
            email: { 
                required: "Incorrect", 
            }, 
        }, 
        // the errorPlacement has to take the table layout into account 
        errorPlacement: function(error, element) { 
            if ( element.is(":radio") ) 
                error.appendTo( element.parent().next().next() ); 
            else if ( element.is(":checkbox") ) 
                error.appendTo ( element.next() ); 
            else 
                error.appendTo( element.parent().next() ); 
        }, 
        // specifying a submitHandler prevents the default submit, good for the demo 
        submitHandler: function() { 
            alert("submitted!"); 
        }, 
        // set this class to error-labels to indicate valid fields 
        success: function(label) { 
            // set   as text for IE 
            label.html(" ").addClass("checked"); 
        } 
    });


}); 

window.onload = function() {
   for(var i = 0, l = document.getElementsByTagName('input').length; i < l; i++) {
        if(document.getElementsByTagName('input').item(i).type == 'text') {
            document.getElementsByTagName('input').item(i).setAttribute('autocomplete', 'off');
        };
    };
  };
</script>
</head>
<body>
<form class="form1c" id="form1" method="get" action="">
    <fieldset id="contactForm">
        <legend>Formulier</legend>
        <table>
            <tbody>
                <tr>
                    <td class="inputLabel"><label for="naam">Naam:</label></td>
                    <td class="inputBG"><input type="text" name="naam" tabindex="1" id="naam" /></td><td class="status"></td>
                </tr>
</tbody>
</table>
</fieldset>
</form>

</body>
</html>

In IE wordt na het klikken op de Submit knop de gehele pagina vernieuwd, dus het lijkt alsof de javascript functies niet worden aangeroepen. Nu heb ik mij rot gezocht naar een mogelijke oorzaak, maar heb helaas niets kunnen vinden.

Weet iemand wat ik fout doe?

vrijdag 29 augustus 2008 20:05

Acties:

crisp

Devver

Pixelated

trailing komma's

Intentionally left blank

vrijdag 29 augustus 2008 20:14

Acties:

Kwastie

Awesomeness

waarom maak je gebruik van 'twee' soorten javascript ?

want

JavaScript:

window.onload = function() {
   for(var i = 0, l = document.getElementsByTagName('input').length; i < l; i++) {
           if(document.getElementsByTagName('input').item(i).type == 'text') {
              document.getElementsByTagName('input').item(i).setAttribute('autocomplete', 'off');
          };
       };
  };

is namelijk niet de manier hoe je moet werken als gebruikt maakt van jquery.

$(document).ready(function() { betekend namelijk hetzelfde als window.onload = function() {
en document.getElementsByTagName betekend hetzelfde als $('naam').

Ik weet niet of het correct is maar volgens mij ben je wezen knippen/plakken (anders had je dit namelijk geweten)

When I get sad i stop being sad and be awesome instead

vrijdag 29 augustus 2008 20:29

Acties:

H004

Kwastie schreef op vrijdag 29 augustus 2008 @ 20:14:
waarom maak je gebruik van 'twee' soorten javascript ?

want
JavaScript:
1
...
is namelijk niet de manier hoe je moet werken als gebruikt maakt van jquery.

$(document).ready(function() { betekend namelijk hetzelfde als window.onload = function() {
en document.getElementsByTagName betekend hetzelfde als $('naam').

Ik weet niet of het correct is maar volgens mij ben je wezen knippen/plakken (anders had je dit namelijk geweten)

Maar als t wel werkt dan is dat blijkbaar niet noodzakelijk. T ligt dus aan de trailing comma's waar IE over valt (bv. de komma op regel 13), maar FF niet...

zaterdag 30 augustus 2008 13:39

Acties:

radem205

Topicstarter

Bedankt voor de reacties. Het is aannemelijk dat het inderdaad aan de trailing komma's ligt, maar wanneer ik onderstaande code gebruik dan werkt het zowel in FF als in IE niet (meer).

HTML:

<script type="text/javascript">
$(document).ready(function() { 
    // validate signup form on keyup and submit 
    var validator = $("#form1").validate({ 
        rules: { 
            naam: "required", 
            email: { 
                required: true, 
                email: true
            }
            telefoon: {
                required: false,
                number: true,
                minlength: 10
            }
        }
        messages: { 
            naam: "Niet ingevuld", 
            email: { 
                required: "Incorrect" 
            }
        } 
        // the errorPlacement has to take the table layout into account 
        errorPlacement: function(error, element) { 
            if ( element.is(":radio") ) 
                error.appendTo( element.parent().next().next() ); 
            else if ( element.is(":checkbox") ) 
                error.appendTo ( element.next() ); 
            else 
                error.appendTo( element.parent().next() ); 
        }
        // specifying a submitHandler prevents the default submit, good for the demo 
        submitHandler: function() { 
            alert("submitted!"); 
        } 
        // set this class to error-labels to indicate valid fields 
        success: function(label) { 
            // set   as text for IE 
            label.html(" ").addClass("checked"); 
        } 
    });

for(var i = 0, l = document.getElementsByTagName('input').length; i < l; i++) {
           if(document.getElementsByTagName('input').item(i).type == 'text') {
              document.getElementsByTagName('input').item(i).setAttribute('autocomplete', 'off');
          };
};

});
</script>

In de Foutconsole geeft ie een fout aan, namelijk:

"missing } after property list
telefoon {"

Maar ik zie niet wat ik nou fout doe

zaterdag 30 augustus 2008 13:46

Acties:

crisp

Devver

Pixelated

nu mis je weer een komma; tussen regel 16 en 17 om precies te zijn

Intentionally left blank

zaterdag 30 augustus 2008 13:49

Acties:

radem205

Topicstarter

Hij blijft de foutmelding geven in de Foutconsole en het werkt dus nog niet in FF en in IE

zaterdag 30 augustus 2008 13:49

Acties:

Snake

Los Angeles, CA, USA

crisp schreef op zaterdag 30 augustus 2008 @ 13:46:
nu mis je weer een komma; tussen regel 16 en 17 om precies te zijn

En na 22, 31, en 35 if I'm correct.

Going for adventure, lots of sun and a convertible! | GMT-8

zaterdag 30 augustus 2008 13:50

Acties:

crisp

Devver

Pixelated

Snake schreef op zaterdag 30 augustus 2008 @ 13:49:
[...]

En na 22, 31, en 35 if I'm correct.

jep, ook; ik haakte al af bij de eerste missende komma

Intentionally left blank

zaterdag 30 augustus 2008 13:54

Acties:

radem205

Topicstarter

Helemaal top jongens! Dit was inderdaad het probleem. Na het toevoegen van een extra komma op regel 10 en de door jullie aangegeven plaatsen werkt het correct. Hartelijk dank!