Logo Logo

Documentation v1.0.0

  • Home
  • FormValidation
  • Overview
Preview
Light
Dark
System

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>
try metronic buy mega bundle
Preview Get Help Buy Now