javascript - jQuery Validation: determine if field was validated on form submit, or a diff. event? -

javascript - jQuery Validation: determine if field was validated on form submit, or a diff. event? -

i'm using jquery validation few forms. how can determine if field validated when form submitted rather separate event, such key up, blur, etc.?

for illustration in this jsfiddle, clicking submit prints 2 "validation: success" messages before "form submitted" message. stop "validation: success" messages beingness printed when form submitted.

$("form").validate({ success: function(label, element) { $(element).next(".help") .addclass("valid").removeclass("invalid"); }, onkeyup: function(element, event) { homecoming this.element(element); }, errorplacement: function(error, element) { var help = $(element).next(".help"); if (error.html().length === 0) { log("validation: success"); help .addclass("valid").removeclass("invalid") .html(originalhelp[element.attr("id")]); } else { log("validation: failure"); help .addclass("invalid").removeclass("valid") .html(error.html()); } }, submithandler: function(form) { log("form submitted"); }, rules: { firstname: "required", surname: "required" } });

edited clarity, makes more sense.

there many issues how you've constructed this, don't know start. basically, you've altered callback functions point every built-in feature of plugin broken or disabled.

the errorplacement callback placing message label within layout. you absolutely not want add/remove error classes within function. plugin handling automatically.

the success callback placing error label when field valid. typically, people utilize placing greenish checkmark, etc. next field after passes validation. may can use.

that beingness said, might able utilize unhighlight , highlight callback functions toggling classes... close how plugin works default.

validclass: "valid", // default errorclass: "invalid", // default "error" highlight: function(element, errorclass, validclass) { $(element).addclass(errorclass).removeclass(validclass); }, unhighlight: function(element, errorclass, validclass) { $(element).addclass(validclass).removeclass(errorclass); },

you not need return within onkeyup function.

onkeyup: function(element, event) { this.element(element); },

you're trying utilize own error messages within own containers. instead, leverage the options provided plugin, can create , toggle errors automatically.

errorelement: "p", // default 'label' messages: { firstname: "please come in first name.", surname: "please come in surname." }

since default error placement after input element, resulting html same manually written markup jsfiddle.

there still bit of work do, gets lot closer.

http://jsfiddle.net/3csooa8e/7/

quote op's comment:

"i have to: (1) show help on click, (2) show errors in same spot, , (3) show original help on valid alter appearance of it. ... i'm having problem preventing success bubbles (3) popping since fields validated."

demo: http://jsfiddle.net/3csooa8e/11/

same above, except fields filled in: http://jsfiddle.net/3csooa8e/12/

$(document).ready(function () { $('input').on('click', function () { $(this).next('.help').show(); // shows bubble on click }); $("form").validate({ onkeyup: function (element, event) { this.element(element); }, submithandler: function (form) { $(form).find('.help').hide(); // hide bubbles on valid form on button click log("form submitted"); }, validclass: "valid", errorclass: "invalid", rules: { firstname: "required", surname: "required" }, errorplacement: function () { homecoming false; // suppress default messages }, highlight: function (element, errorclass, validclass) { // show bubble , apply css invalid $(element).next('.help').show().addclass(errorclass).removeclass(validclass); }, unhighlight: function (element, errorclass, validclass) { // maintain bubble , apply css valid $(element).next('.help').addclass(validclass).removeclass(errorclass); }, }); });

javascript jquery forms jquery-validate