Documentation v1.1.5

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 id to the form element.
Important Add fv-row CSS class to the input group to identify the input field that requires FormValidation.
Please refer to the official documentation for 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>

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v1.1.5

Overview

Usage

Initialization

Integrating with ASP.Net

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v1.1.5

No result found

Overview

Usage

Initialization

Integrating with ASP.Net