jQuery Validate ErrorHandling -

i'm using jquery validate plugin. now, if there invalid element element should cleared , selected. furthermore, form must not submitted before validated. code doesn't seem work expected.

what problem ?

here's code:

$("#track").validate({     onsubmit: false,     focusinvalid: true,     focuscleanup: true,     errorelement: "span",     errorclass: "invalid",     validclass: "valid",     highlight: function(element, errorclass, validclass) {         $(element).addclass(errorclass);         $(element.form).find("span[id=" + element.id + "-error]").addclass(errorclass);         ion.sound.play("error");         },     unhighlight: function(element, errorclass, validclass) {         $(element).removeclass(errorclass);         $(element.form).find("span[id=" + element.id + "-error]").removeclass(errorclass);         ion.sound.play("success");     },     rules: {         prio: {             prio : true,             required: true         },         lagerort: {             place : true,             required: true         },         ident: {             ident : true,             required: true         }     },     messages: {         prio:  {             required: ""         },         lagerort: {             required: ""         },         ident: {             required: ""         }     },     submithandler: function(form) {         $(form).ajaxsubmit();     } }); 

what you're trying unclear, i've identified issues in jsfiddle:

1. you including version 1.5.2 of plugin many years old. latest version 1.13.1 per the developer's website.

2. "the form must not submitted before validated"

   you've set onsubmit false. per docs, disables onsubmit validation; alone allowing submit form without validation. not allowed set onsubmit option true, remove it.

3. you've defined custom error messages empty strings, yet you've set errorelement option span. makes no sense. if error messages empty strings, not matter kind of container have. return false inside of errorplacement function , block error messages.

4. you're using highlight , unhighlight target span id of element. since don't have error messages , span empty, line totally superfluous.

5. you're using highlight set timer triggers focus every millisecond. when form invalid, throws infinite loop of blinking elements. removed because plugin automatically bring focus first invalid field.

6. you're using highlight set field empty. never work. function triggered on every keystroke if user starts entering valid data, code wipe blank after first character typed.

7. that leaves nothing applying error/valid classes in highlight/unhighlight, default behavior already. over-riding options can removed entirely.

8. i activated submit button testing purposes.

not sure if meets every requirement, @ least jquery validate plugin working...

http://jsfiddle.net/vke1u6ql/3/

$("#track").validate({     errorclass: "invalid",     validclass: "valid",     rules: {         prio: {             prio: true,             required: true         },         lagerort: {             place: true,             required: true         },         ident: {             ident: true,             required: true         }     },     errorplacement: function() {         return false;     },     submithandler: function (form) {         $(form).ajaxsubmit();     } });