2

I have a simple custom developed list that contains three columns, one of these columns should take maximum 7 characters, otherwise problems are caused, thus I want to make the user aware of the number of characters typed / remaining.

I have tried the below code snippet and css to achieve this:

<script src="../../Style Library/Scripts/jquery-1.9.0.min.js" type="text/javascript" ></script>
<script type="text/javascript">
// ----------- start show Nr of Characters left for the header
(function($){  
$.fn.fieldLimit = function(options) {  
return this.each(function() {  
var characters = 7;
$(this).keyup(function(){
if($(this).val().length > characters){
$(this).val($(this).val().substr(0, characters));
}   
var remaining = characters - $(this).val().length;
$(options.result).html(remaining + " tecken kvar ");         
});
});  
};  
})(jQuery);
// ----------- start jQuery DocReady
$(document).ready(function() {
// -- Characthers left
$('td.ms-formbody > span').prepend("<span class='CharactersLeft'></span>");
$('input[title$=FieldDisplayName]').fieldLimit({result:".CharactersLeft"});
})
</script>

<style type="text/css">
/* Count characters for page title */
.CharactersLeft{
font-family:Calibri;
font-size:10px;
color:red;
display:block
}
</style>
</asp:Content>

I have inserted the above code snippet inside the lists NewForm.aspx, particularly inside a PlaceHolderAdditionalPageHead content place holder.

This should result in a red colored message above the field as soon as the user begins typing, why is it not happening?

Any ideas would be appreciated.

  • 1
    My first guess would be that you try to bind the fieldLimit event before the DOM element for the field is rendered. Does it work when you copy paste it in a dev console in the browser? – Robert Lindgren Aug 1 '14 at 8:44
  • I did as you suggested and the class CharactersLeft gets actually rendered when I debugg the NewForm.aspx using chrome, however looking at the Network tab in debugging mode, it shows that jquery.min.map file cannot be found, the file's name is jquery-1.9.0.min.js and is located in the Style Library, why does it complain about jquery.min.map while the file's name is jquery-1.9.0.min.map ? – Eliya Amanoeel Aug 1 '14 at 11:35
  • Well if it can not find the jQuery file, than the URL to the script must be incorrect for your file and page – Robert Lindgren Aug 1 '14 at 11:37
3

this function set field limit characters:

function setFieldLimitCharacters( field, limit )
{
    field.unbind( 'keyup change input paste' ).bind( 'keyup change input paste',function(e){
        if( $( this ).val().length > limit )
        {
            $( this ).val( $( this ).val().substring( 0, limit ) );
        }
    });
}

usage:

setFieldLimitCharacters( $( "#fieldID" ), 7 );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.