Skip to content

Instantly share code, notes, and snippets.

@meziantou

meziantou/WebFormsBootstrapValidation.aspx

Last active May 27, 2023 11:29
Show Gist options
  • Star 16 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
  • Save meziantou/1755cd2d21c8a1d1d148 to your computer and use it in GitHub Desktop.
Save meziantou/1755cd2d21c8a1d1d148 to your computer and use it in GitHub Desktop.
Download ZIP
ASP.NET WebForms Validators & Bootstrap
Raw
WebFormsBootstrapValidation.aspx
<%@ 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>
function extendedValidatorUpdateDisplay(obj) {
// Appelle la méthode originale
if (typeof originalValidatorUpdateDisplay === "function") {
originalValidatorUpdateDisplay(obj);
}
// Récupère l'état du control (valide ou invalide)
// et ajoute ou enlève la classe has-error
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");
}
}
}
// Remplace la méthode ValidatorUpdateDisplay
var originalValidatorUpdateDisplay = window.ValidatorUpdateDisplay;
window.ValidatorUpdateDisplay = extendedValidatorUpdateDisplay;
</script>
</form>
</body>
</html>
@wezmag
Copy link

wezmag commented Dec 14, 2016

Nice solution! I have been looking for this for ages.

@NiekRood
Copy link

Excellent! I am just having troubles when using a form in an updatepanel. Any idea what I should do?

@nairbijesh
Copy link

Super! solved my problem. thanks

Copy link

ghost commented Jun 27, 2017

Can you think of an easy way to make this work for asp:RadioButtonList It seems to have a but of trouble locating Validators on those and throws a null exception when it checks control.Validators.length

@amirzarafshani
Copy link

amirzarafshani commented Jul 30, 2017 •
edited

How can I handle ValidationGroup with this script ?

@barri1557
Copy link

barri1557 commented Feb 26, 2018 •
edited

Now it works perfect, thank you!!!

@RvdHout
Copy link

RvdHout commented Jul 7, 2020

Excellent! I am just having troubles when using a form in an updatepanel. Any idea what I should do?

Wrap it inside

function pageLoad() {

}

@DylanDile
Copy link

Nice it works well. Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment