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 theformelement. -
Important Add
fv-rowCSS 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>
2024©
Keenthemes
