JQuery validation plugin: how can I handle errors as warnings and allow form submission?

Question

as the subject suggests, I use the bassistance.de validation plugin (http://docs.jquery.com/Plugins/Validation/), and I would like to be able to submit the form even if there are validation errors. In principle, we only want to use plugin to warn the user about potential problems (please do not doubt the usability issues with this, I know).

So, is there a way to do this easily or should I crack the plugin code?

Thanks in advance!

Answer 1

I will not doubt the usability issues around this :). This is really possible using the invalidHandler parameter to check:

 $("#test-form").validate({ invalidHandler: function() { /* Allow the user to see the error messages before submitting: */ window.setTimeout(function() { $("#test-form")[0].submit(); }, 1000); } }); 

Here is an example: http://jsfiddle.net/ghDbd/

Answer 2

I had a similar problem, I decided to use the options.ignore property. http://docs.jquery.com/Plugins/Validation/validate#toptions

 $("form").validate({ rules: { "hard": {word_count:10}, // No more than 10 words "soft_and_hard": {word_count:[30,10]} // No more than 40 words }, ignore: ".error-okay" }); 

I used a special validator to count words. It was decided that we should display the error after X words (the number of words they requested), and not allow the form to be submitted if they have the words X + T. When it had between X and X + T words, I would add a class "error-okay" to the element (where ".error-okay" is what I passed as an ignore parameter).

 jQuery.validator.addMethod("word_count", function(value, element, max) { var tolerance = 0; if (max instanceof Array){ tolerance = max[1]; max = max[0]; } var typedWords = jQuery.trim(value).split(' ').length; if(typedWords <= max + tolerance) $(element).addClass("error-okay"); else $(element).removeClass("error-okay"); return (typedWords <= max); }, function(max, ele){ var tolerance = ""; if (max instanceof Array){ tolerance = "<br/>Definitly no more than " + ( max[0] + max[1] ) + " words."; max = max[0]; } return "Please enter " + max +" words or fewer. You've entered " + jQuery.trim($(ele).val()).split(' ').length + " words." + tolerance; }); 

If you have multiple checks in a field, you are probably better off writing the invalidHandler function, possibly combining it with the added classes, as I used (for example: "word-count-okay").