我有一个页面,其中包含使用 jquery-validate 插件验证的字段,并且希望在字段上包含一个类似 twitter 的字符计数器,以查看还剩下多少个字符
这是我的演示 http://jsfiddle.net/4k1vokgv/1/
$(document).ready(function() {
$(".counter").characterCounter({
counterCssClass: 'text-counter',
limit: 1000,
counterFormat: 'Characters Remaining: %1',
});
var validatorStrat = $("#strategyForm").validate({
rules:{
exampleInputEmail1: {
required: true,
},
ZB_note: {
required: true,
maxlength: 140,
},
ZC_note: {
required: true,
maxlength: 140,
},
},
submitHandler: function(form) {}
});
});
两个字符计数器都可以正常工作,直到 问题是,当 jquery-validate 引发验证错误(必需、最大长度等)时,字符计数器将停止处理任何有错误的元素。
我不认为这是字符计数器插件本身的问题。我认为 jquery validate 的错误生成以某种方式导致了这种情况。
无论如何,包括下面的完整片段,非常感谢任何帮助
/**
* Character Counter v1.0
* ======================
*
* Character Counter is a simple, Twitter style character counter.
*
* https://github.com/dtisgodsson/jquery-character-counter
*
* @author Darren Taylor
* @author Email: <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="582b30372d2c183c392a2a3d3637362c303d76363d2c" rel="noreferrer noopener nofollow">[email protected]</a>
* @author Twitter: darrentaytay
* @author Website: http://darrenonthe.net
*
*/
(function($) {
$.fn.characterCounter = function(options){
var defaults = {
exceeded: false,
limit: 150,
counterWrapper: 'span',
counterCssClass: 'help-block',
counterFormat: '%1',
counterExceededCssClass: 'exceeded',
onExceed: function(count) {},
onDeceed: function(count) {},
customFields: {},
};
var options = $.extend(defaults, options);
return this.each(function() {
$(this).after(generateCounter());
bindEvents(this);
checkCount(this);
});
function customFields(params)
{
var html='';
for (var i in params)
{
html += ' ' + i + '="' + params[i] + '"';
}
return html;
}
function generateCounter()
{
var classString = options.counterCssClass;
if(options.customFields.class)
{
classString += " " + options.customFields.class;
delete options.customFields['class'];
}
return '<'+ options.counterWrapper +customFields(options.customFields)+' class="' + classString + '"></'+ options.counterWrapper +'>';
}
function renderText(count)
{
return options.counterFormat.replace(/%1/, count);
}
function checkCount(element)
{
var characterCount = $(element).val().length;
var remaining = options.limit - characterCount;
if( remaining < 0 )
{
$(element).next("." + options.counterCssClass).addClass(options.counterExceededCssClass);
options.exceeded = true;
options.onExceed(characterCount);
}
else
{
if(options.exceeded) {
$(element).next("." + options.counterCssClass).removeClass(options.counterExceededCssClass);
options.onDeceed(characterCount);
options.exceeded = false;
}
}
$(element).next("." + options.counterCssClass).html(renderText(remaining));
};
function bindEvents(element)
{
$(element)
.bind("keyup", function () {
checkCount(element);
})
.bind("paste", function () {
var self = this;
setTimeout(function () { checkCount(self); }, 0);
});
}
};
})(jQuery);
$.validator.setDefaults({
errorElement: "span",
errorClass: "help-block",
// validClass: 'stay',
highlight: function (element, errorClass, validClass) {
$(element).addClass(errorClass); //.removeClass(errorClass);
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass(errorClass); //.addClass(validClass);
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
},
errorPlacement: function(error, element) {
if(element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else if (element.hasClass('select2')) {
error.insertAfter(element.next('span'));
} else {
error.insertAfter(element);
}
}
});
$(document).ready(function() {
$(".counter").characterCounter({
counterCssClass: 'text-counter',
limit: 140,
counterFormat: 'Characters Remaining: %1',
});
var validatorStrat = $("#strategyForm").validate({
rules:{
exampleInputEmail1: {
required: true,
},
ZB_note: {
required: true,
maxlength: 1000,
},
ZC_note: {
required: true,
maxlength: 1000,
},
},
submitHandler: function(form) {}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<form role="form" id="strategyForm">
<div class="form-group">
<label for="exampleInputEmail1" class="control-label">Email address</label>
<input type="email" class="form-control" name="exampleInputEmail1" placeholder="Enter email" />
</div>
<div class="form-group">
<label class="control-label">What amount is to be solicited and when?</label>
<textarea class="form-control counter" rows="1" id="ZB_note" name="ZB_note" ></textarea>
</div>
<div class="form-group">
<label class="control-label">Who will be involved in the soliciation?</label>
<textarea class="form-control counter" rows="1" id="ZC_note" name="ZC_note" ></textarea>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
最佳答案
我在这里制作了一支具有此功能的代码笔。
我也会在这里添加和讨论代码,这确实不难。
$( document ).ready(function() {
$('#text').on('keypress', function(e) {
var count = $(this).val().length;
if(count != 0) {
count += 1;
} else {
count = count;
}
$('#characterCount').text(count);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col m-2">
<textarea id="text" rows="4" cols="50"></textarea>
</div>
<div class="col m-2">
<textarea id="characterCount" rows="4" cols="50"></textarea>
</div>
</div>
document.ready 函数确保该函数在 DOM 准备就绪时加载。然后,只要在文本区域上按下某个键,就会触发一个函数。然后,您可以将计数变量设置为当前文本 ID 值的长度。然后将计数设置为加一,因为它是零索引。然后,您可以在另一个文本区域上表示该值。
关于javascript - jquery 使用字符计数器插件进行验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31590394/