FormValidation v0.8.1 is released, supports Bootstrap 4 alpha 3

stringLength validator

Validate the length of a string

← Validators

Options

Option HTML attribute Type Description
max data-fv-stringlength-max or maxlength Number The maximum length.
It's dynamic option
message data-fv-stringlength-message String The error message. The dynamic message is supported
min data-fv-stringlength-min or minlength Number The minimum length.
It's dynamic option
utf8Bytes data-fv-stringlength-utf8bytes Boolean Evaluate string length in UTF-8 bytes. Default to false
trim data-fv-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-fv-stringlength="true".
You don't need to do that when using either HTML 5 maxlength="..." or minlength="..." attribute.
The message and other options can be updated on the fly via the updateMessage() and updateOption() methods

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:

<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>

<script>
$(document).ready(function() {
    $('.post form').formValidation({
        framework: 'bootstrap',
        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;
                        }
                    }
                }
            }
        }
    });
});
</script>

ejemplos

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-xs-3 control-label">Full name</label>
        <div class="col-xs-6">
            <input type="text" class="form-control" name="fullName" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Bio</label>
        <div class="col-xs-6">
            <textarea rows="5" class="form-control" name="bio"></textarea>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#stringLengthForm').formValidation({
        framework: 'bootstrap',
        icon: {
            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'
                    }
                }
            }
        }
    });
});
</script>
<form id="stringLengthForm" class="form-horizontal"
    data-fv-framework="bootstrap"
    data-fv-icon-valid="glyphicon glyphicon-ok"
    data-fv-icon-invalid="glyphicon glyphicon-remove"
    data-fv-icon-validating="glyphicon glyphicon-refresh">

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

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

<script>
$(document).ready(function() {
    $('#stringLengthForm').formValidation();
});
</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-fv-framework="bootstrap"
    data-fv-icon-valid="glyphicon glyphicon-ok"
    data-fv-icon-invalid="glyphicon glyphicon-remove"
    data-fv-icon-validating="glyphicon glyphicon-refresh">

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

<script>
$(document).ready(function() {
    $('#html5Form').formValidation();
});
</script>
Example

Related validators

The following validators might be useful to you:

← stringCase validator uri validator →