Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save wezmag/5e566cbc2513348855b2ff87688dbedc to your computer and use it in GitHub Desktop.
Save wezmag/5e566cbc2513348855b2ff87688dbedc to your computer and use it in GitHub Desktop.
ASP.NET WebForms Validators & Bootstrap
<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ASP.NET WebForms Validators & Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" />
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server"></asp:ScriptManager>
<div style="padding: 50px;">
<div class="form-group">
<asp:Label runat="server" CssClass="control-label" AssociatedControlID="Name" Text="Name" />
<asp:TextBox runat="server" ID="Name" CssClass="form-control" />
<asp:RequiredFieldValidator runat="server" CssClass="help-block" ControlToValidate="Name" ErrorMessage="Veuillez saisir votre nom" />
</div>
</div>
<script>
//for CustomValidator.OnServerValidate()
$(document).ready(function () {
$("span.help-block:visible").closest(".form-group").addClass("has-error");
});
function extendedValidatorUpdateDisplay(obj) {
// Call the original method
if (typeof originalValidatorUpdateDisplay === "function") {
originalValidatorUpdateDisplay(obj);
}
// Retrieves control status (valid or invalid)
// And adds or removes the has-error class
var control = document.getElementById(obj.controltovalidate);
if (control) {
var isValid = true;
for (var i = 0; i < control.Validators.length; i += 1) {
if (!control.Validators[i].isvalid) {
isValid = false;
break;
}
}
if (isValid) {
$(control).closest(".form-group").removeClass("has-error");
} else {
$(control).closest(".form-group").addClass("has-error");
}
}
}
// Replaces the ValidatorUpdateDisplay method with extendedValidatorUpdateDisplay
var originalValidatorUpdateDisplay = window.ValidatorUpdateDisplay;
window.ValidatorUpdateDisplay = extendedValidatorUpdateDisplay;
</script>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment