JQuery Validation Character Count
I am using some jquery validation and it's all working wonderfully but when the user types in more characters than is allowed in the text box I would like the validation message to say 'You are only allowed between 10 and 200 characters. You have typed 213 character开发者_运维技巧s'.
The current code looks like this:
rules: {
Description: { rangelength: [10, 200] }
},
messages: {
Description: "You are only allowed between 10 and 200 characters."
}
Anyone have any ideas?
edit: It'd be good if it kept with the style of the programming, but if that's not possible I'll just have to find another way around it.
<html>
<head>
<title>Javascript</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js" type="text/javascript"></script>
<script>
$(function(){
$('#myform').validate({
rules: {
field: {
required: true,
rangelength: [2, 6]
}
},
messages: {
field: {
rangelength: function(range, input) {
return [
'You are only allowed between ',
range[0],
'and ',
range[1],
' You have typed ',
$(input).val().length,
' characters'
].join('');
}
}
}
});
});
</script>
</head>
<body>
<form id="myform">
<input id="field" name="field" type="text"/>
</br>
<input type="submit" value="submit"/>
</form>
</body>
</html>
<html>
<head>
<title>Javascript</title>
<script src="https://code.jquery.com/jquery-3.1.1.js" type="text/javascript"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js" type="text/javascript"></script>
<script>
$(function(){
jQuery.validator.addMethod("rangelength", function(value, element, param) {
param[2]=value.length;
return this.optional(element) || ((value.length > param[0]) && (value.length < param[1]));
},'You are only allowed between {0} and {1}. You have typed {2} characters');
$('#myform').validate({
rules: {
field: {
required: true,
rangelength: [2, 6]
}
}
});
});
</script>
</head>
<body>
<form id="myform">
<input id="field" name="field" type="text"/>
</br>
<input type="submit" value="submit"/>
</form>
</body>
There You go!
function LimitText(ref, iminlength, imaxlength) {
if ((ref.value.length < iminlength) || (ref.value.length > imaxlength)) {
alert("You are only allowed between " + iminlength + " and " + imaxlength + " characters\nCurrent length is: " + ref.value.length);
ref.focus();
}
}
<textarea name="myTextArea" rows="5" cols="5" onblur="LimitText(this,10,160)" ></textarea>
We use this tiny plugin:
(function ($) {
$.fn.textAreaLimit = function( limit, element ) {
return this.each( function () {
var $this = $(this);
var displayCharactersLeft = function(charactersLeft) {
if( element ) {
$(element).html( (charactersLeft <= 0) ? '0' : charactersLeft );
}
};
$this.bind('focus keypress blur click', function() {
var val = $this.val();
var length = val.length;
if(length > limit) {
$this.val( $this.val().substring(0, limit) );
}
displayCharactersLeft( limit-length );
});
displayCharactersLeft( limit-$this.val().length );
});
};
})(jQuery);
You can use it like this:
$('textarea').textAreaLimit(500, ".chars-left");
Element .chars-left will be updated with number of characters left. It works with any text field, of course.
加载中,请稍侯......
精彩评论