1

我正在使用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);

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

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

2 回答 2

2

感谢@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.'];

                }
            }
        }
    });
});
于 2013-03-08T21:55:46.840 回答
1

如果不使用内置方法进行此类更改，则无法动态更改rules或在表单上初始化插件之后。messages

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

$('#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/

于 2013-03-08T20:02:02.063 回答