Question

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

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

为了简单起见，这是我的jQuery。 以下所有代码在放在一起时无法正常运行，因此我需要一个能够正常工作的解决方案

这是我的代码：

$('#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事件处理函数或您用于动态计算字符的任何函数内调用上述内容。该演示非常简洁，需要克服一些问题，但它表明可能可能。

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

jQuery Validate Plugin - 在错误消息中显示minlength“要去的字符”

2 个答案: