Documentation v8.1.1

Preview Downloads Purchase

Overview

FormValidation is one of the best validation library for JavaScript. For more info see the official siteand the Github repository.

Usage

FormValidation's Javascript bundles are globally included in all pages.

<link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/plugins/global/plugins.bundle.js"></script>

Initialization

FormValidation is primarily initialized via Javascript by adding a unique idto the formelement.
Important Add fv-rowCSS class to the input group to identify the input field that requires FormValidation.
Please refer to the official documentationfor all validation options available.

Integrating with ASP.Net

Since ASP.Net changes the field name when rendering the controls, you have to use


											<%= control.UniqueID %>

as the name of fields. For more information, please refer to the official documentation.

<%@ 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').formValidation({
        framework: 'bootstrap',
        icon: {
            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>