BootstrapValidator

Examples

Integrating with server side

This guide shows how to integrate BootstrapValidator with the server side. If you use the plugin with your server side language, please leave the sample code in the comments. I then will update the guide.

ASP.Net

Since ASP.Net changes the field name when rendering the controls, you have to use <%= control.UniqueID %> as the name of fields.

<%@ Page Title="" Language="C#" MasterPageFile="~/Master.Master" AutoEventWireup="true"
    CodeBehind="..." Inherits="..." %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <!-- Fields -->
    <asp:TextBox runat="server" CssClass="form-control" ID="userNameTextBox" />

    <script type="text/javascript">
    $(document).ready(function() {
        $('#form1').bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                // There is no single quote
                <%=userNameTextBox.UniqueID%>: {
                    validators: {
                        notEmpty: {
                            message: 'The username is required and cannot be empty'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: 'The username must be more than 6 and less than 30 characters long'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9]+$/,
                            message: 'The username can only consist of alphabetical and number'
                        },
                        different: {
                            field: 'password',
                            message: 'The username and password cannot be the same as each other'
                        }
                    }
                }
            }
        });
    });
    </script>
</asp:Content>
<%@ Page Title="" Language="C#" MasterPageFile="~/Master.Master" AutoEventWireup="true"
    CodeBehind="..." Inherits="..." %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <!-- Fields -->
    <asp:TextBox runat="server" CssClass="form-control" ID="userNameTextBox"
            data-bv-notempty="true"
            data-bv-notempty-message="The username is required and cannot be empty"

            data-bv-stringlength="true"
            data-bv-stringlength-min="6"
            data-bv-stringlength-max="30"
            data-bv-stringlength-message="The username must be more than 6 and less than 30 characters long"

            data-bv-regexp="true"
            data-bv-regexp-regexp="^[a-zA-Z0-9]+$"
            data-bv-regexp-message="The username can only consist of alphabetical and number"

            data-bv-different="true"
            data-bv-different-field="password"
            data-bv-different-message="The username and password cannot be the same as each other" />

    <script type="text/javascript">
    $(document).ready(function() {
        $('#form1').bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            }
        });
    });
    </script>
</asp:Content>

Rails

For Rails, the input field is constructed from model name and field name. For example, user have email as field, when form helper render view, the input field name will be 'user[email]'. The syntax for calling the plugin looks like below:

$(form).bootstrapValidator({
    fields: {
        'user[email]': {
            validatorName: validatorOptions
        }
    }
});

When using BootstrapValidator in a Rails remote form, in order to prevent the form from multiple submissions, trigger the success.form.bv event as following:

$(form)
    .bootstrapValidator({
        ...
    })
    .on('success.form.bv', function(e) {
        // Called when the form is valid
        var $form = $(e.target);
        if ($form.data('remote') && $.rails !== undefined) {
            e.preventDefault();
        }
    });

Resource: