开发者

jQuery validation plugin: how can I treat errors as warnings and allow form submit?

as the subject suggests, I am using the bassist开发者_JAVA百科ance.de validation plugin (http://docs.jquery.com/Plugins/Validation/) and I would like to be able to submit the form even when there are validation errors. Basically, we only want to use the plug-in to warn the user of potential issues (please don't question the usability issues with this , I know).

So, is there a way to do it easily or should I hack into the plugin code?

Thanks in advance!


I ran into a similar issue, 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 custom validator to count words. It was decided that we should display an error after X words (the word count they were asking for), and not allow the form to submit if they have X + T words. 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 the ignore option).

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 validations on a field, you're probably better off writing a invalidHandler function, possibly combining it with added classes like I used (eg: "word-count-okay").


I will not question the usability issues around this :). This is indeed possible by using the invalidHandler option for validate:

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

Here's an example: http://jsfiddle.net/ghDbd/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜