v0.5.3 is released on 2014.11.05!

stringLength validator

Validate the length of a string

Options

Option	HTML attribute	Type	Description
`max`	`data-bv-stringlength-max` or `maxlength`	Number	The maximum length. It's dynamic option
`message`	`data-bv-stringlength-message`	String	The error message
`min`	`data-bv-stringlength-min` or `minlength`	Number	The minimum length. It's dynamic option
`utf8Bytes`	`data-bv-stringlength-utf8bytes`	Boolean	Evaluate string length in UTF-8 bytes. Default to `false`
`trim`	`data-bv-stringlength-trim`	Boolean	Indicate the length will be calculated after trimming the value or not. Default to `false`

At least one of min and max options is required.

When setting options via HTML attributes, remember to enable the validator by setting data-bv-stringlength="true".
You don't need to do that when using either HTML 5 maxlength="..." or minlength="..." attribute.

Using with Rails form

Rails' forms count new lines as two characters (\r\n). Meanwhile, the stringLength validator counts new lines as one character. So the user can input more than number of allowed characters as long as they enter a new line.

This problem can be solved by using the dynamic option feature which is provided by the max option:

Form
JS

<div class="post">
    <%= form_for @post do |f| %>
        <div class="form-group">
            <%= f.label :body %>
            <%= f.text_area :body, class: 'form-control', rows: 3 %>
        </div>
        <%= f.submit 'Save', class: 'btn btn-default' %>
    <% end %>
</div>

$('.post form').bootstrapValidator({
    fields: {
        'post[body]': {
            validators: {
                notEmpty: {
                    message: 'Post content is required'
                },
                stringLength: {
                    message: 'Post content must be less than 120 characters',
                    max: function (value, validator, $field) {
                        return 120 - (value.match(/\r/g) || []).length;
                    }
                }
            }
        }
    }
});

Examples

Basic example

In the following form, the Full name and Bio fields must be less than 50 and 200 characters respectively.

<form id="stringLengthForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-3 control-label">Full name</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" name="fullName" />
        </div>
    </div>
    
    <div class="form-group">
        <label class="col-sm-3 control-label">Bio</label>
        <div class="col-sm-6">
            <textarea rows="5" class="form-control" name="bio"></textarea>
        </div>
    </div>
</form>

$(document).ready(function() {
    $('#stringLengthForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            fullName: {
                validators: {
                    stringLength: {
                        max: 50,
                        message: 'The full name must be less than 50 characters'
                    }
                }
            },
            bio: {
                validators: {
                    stringLength: {
                        max: 200,
                        message: 'The bio must be less than 200 characters'
                    }
                }
            }
        }
    });
});

<form id="stringLengthForm" class="form-horizontal"
    data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
    data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
    data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">

    <div class="form-group">
        <label class="col-sm-3 control-label">Full name</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" name="fullName"
                data-bv-stringlength="true"
                data-bv-stringlength-max="50"
                data-bv-stringlength-message="The full name must be less than 50 characters" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-3 control-label">Bio</label>
        <div class="col-sm-6">
            <textarea rows="5" class="form-control" name="bio"
                data-bv-stringlength="true"
                data-bv-stringlength-max="200"
                data-bv-stringlength-message="The bio must be less than 200 characters"></textarea>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#stringLengthForm').bootstrapValidator();
});
</script>

HTML 5 example

The following example demonstrates an usage of the stringLength validator with maxlength and minlength attributes.

<form id="html5Form" class="form-horizontal"
    data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
    data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
    data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">

    <div class="form-group">
        <label class="col-sm-3 control-label">Full name</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" name="fullName"
                maxlength="40"
                minlength="10"
                data-bv-stringlength-message="The full name must be more than 10 and less than 40 characters" />
        </div>
    </div>
</form>

$(document).ready(function() {
    $('#html5Form').bootstrapValidator();
});

Related validators

The following validators might be useful to you:

notEmpty