Logo

Documentation v1.0.6

  • Forms
  • FormValidation
  • Overview
Preview Upgrade to Pro

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>
Upgrade To Pro
Pro Version Benefits Free Pro
UI Elements 20 100
In-house Components 20 40
Crafted Pages 5 20
Complete Documentation
Product Support
Layout Builder
Source Vectors
Email Templates
Calendar App
User Management App
Chat App
Customers App
Upgrade to Jet HTML Free
Download Jet HTML Free
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation
From guides and how-tos, to live demos and code examples to get started right away.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now