jQuery Validate Plugin - 在错误消息中显示 minlength "Characters to go"

Question

我正在使用jQuery Validate Plugin 来验证我网站上的表单。我想更改默认的 minlength 消息以显示字段中仍需要的字符数，并让此数字随着用户在 input 字段中的输入而更改。

例如，如果 minlength 规则为 15 个字符，并且字段中有 2 个字符，则错误消息将显示为 "Please enter at least 13 more characters."

为了简单起见，这是我的 jQuery。 下面的所有代码放在一起时都不能正常工作，所以我需要一个可以正常工作的解决方案

这是小提琴：http://jsfiddle.net/ac2T2/1/

这是我的代码：

$('#contactForm').validate({
    rules: {
        contactName: {
            minlength: 15
        }
    }
});

我想添加一些执行以下操作的代码：

var numOfCharactersToGo = 15 - parseInt($('contactName').val().length);

然后理论上我可以更改minlength 的默认 jQuery 消息，如下所示：

jQuery.extend(jQuery.validator.messages, {
    minlength: jQuery.validator.format('Please enter at least ' + numOfCharactersToGo + ' more characters.')
});

Answer 1

感谢@Sparky 的回答将我引向正确的方向，这是最终答案，以防其他人想要相同的功能。

这是小提琴：http://jsfiddle.net/ZhRGA/8/

HTML

<form id="myform">
    <input type="text" name="field1" id="field1" />
    <br/>
    <input type="submit" />
</form>

jQuery

$(document).ready(function () {
var minChar = 15;
    $('#myform').validate({ // initialize the plugin
        rules: {
            field1: {
                required: true,
                minlength: minChar
            }
        },
        messages: {
            field1: {
                minlength: function () {
                    return [
                        (minChar - parseInt($('#field1').val().length)) +
                        ' more characters to go.'];

                }
            }
        }
    });
});

Answer 2

在表单上初始化插件后，您不能动态更改rules 或messages，除非使用内置方法进行此类更改。

我知道只有一种方法可以在初始化后动态地覆盖任何规则和消息。那是the rules('add') method。

$('#field').on('keyup', function () {  
    current = 15 - parseInt($(this).val().length);
    $(this).rules('add', {
        minlength: 15,
        messages: {
            minlength: current + " characters to go"
        }
    });
});

您需要在 keyup 事件处理函数或您用于动态计算字符的任何函数中调用上述内容。该演示很粗糙，有一些问题需要克服，但它表明它可能是可能的。

非常粗略的 DEMO：http://jsfiddle.net/ZhRGA/5/