Integrating with ASP.Net
← Examples
Since ASP.Net changes the field name when rendering the controls, you have to use <%= control.UniqueID %> as the name of fields.
<%@ 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><%@ 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"
data-fv-notempty="true"
data-fv-notempty-message="The username is required and cannot be empty"
data-fv-stringlength="true"
data-fv-stringlength-min="6"
data-fv-stringlength-max="30"
data-fv-stringlength-message="The username must be more than 6 and less than 30 characters long"
data-fv-regexp="true"
data-fv-regexp-regexp="^[a-zA-Z0-9]+$"
data-fv-regexp-message="The username can only consist of alphabetical and number"
data-fv-different="true"
data-fv-different-field="password"
data-fv-different-message="The username and password cannot be the same as each other" />
<script type="text/javascript">
$(document).ready(function() {
$('#form1').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
}
});
});
</script>
</asp:Content>