我使用ASP.net(Vs2013)中的设计器创建了一个简单的webform。该系统确实运行良好,我只需要使用工具箱中的一些文本框和自定义验证控件。如果输入正确,表单将检查客户端,如果没有则显示错误消息。
然而,错误消息只会在丑陋的红色文本atm中显示在页面上。我非常希望标记这个错误消息,例如在错误上使用Jquery淡入功能,或者使用任何自定义的javascript来挂钩这个来自ASP的js。
最好的方法是什么,在哪里才能做到这一点?
代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="registreren.aspx.cs" Inherits="registreren" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="scripts/jquery.js"></script>
<title></title>
<link href="WebsiteStyle.css" type="text/css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div style="height: 244px">
<table class="auto-style1">
<tr>
<td class="auto-style2" rowspan="1">Username</td>
<td class="auto-style7" rowspan="1">
<asp:TextBox ID="TextBoxUsername" runat="server" Width="240px"></asp:TextBox>
</td>
<td rowspan="1">
<asp:RequiredFieldValidator ID="RequiredUsername" runat="server" ControlToValidate="TextBoxUsername" ErrorMessage="Please enter an username." CssClass="validationError"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="auto-style3" rowspan="1">Email</td>
<td class="auto-style6" rowspan="1">
<asp:TextBox ID="TextBoxEmail" runat="server" Width="240px"></asp:TextBox>
</td>
<td class="auto-style4" rowspan="1">
<asp:RequiredFieldValidator ID="RequiredEmail" runat="server" ControlToValidate="TextBoxEmail" ErrorMessage="Please enter your emailaddress." CssClass="validationError"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="auto-style2" rowspan="1">Password</td>
<td class="auto-style7" rowspan="1">
<asp:TextBox ID="TextBoxPassword" runat="server" Width="240px" TextMode="Password"></asp:TextBox>
</td>
<td rowspan="1">
<asp:RequiredFieldValidator ID="RequiredPassword" runat="server" ControlToValidate="TextBoxPassword" ErrorMessage="Please enter a password." CssClass="validationError"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="auto-style2" rowspan="1">Confirm Password</td>
<td class="auto-style7" rowspan="1">
<asp:TextBox ID="TextBoxConfirmPassword" runat="server" Width="240px" TextMode="Password"></asp:TextBox>
</td>
<td rowspan="1">
<asp:CustomValidator ID="RequiredConfirmPassword" runat="server" ControlToValidate="TextBoxConfirmPassword" ErrorMessage="Please confirm the password." ClientValidationFunction="validateConfirmPassword" ValidateEmptyText="True" CssClass="validationError"></asp:CustomValidator>
</td>
</tr>
<tr>
<td class="auto-style2" rowspan="1">Country</td>
<td class="auto-style7" rowspan="1">
<asp:DropDownList ID="DropDownListSelectCountry" runat="server" Height="16px" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" Width="240px">
<asp:ListItem>Select country</asp:ListItem>
<asp:ListItem>The Netherlands</asp:ListItem>
<asp:ListItem>Belgium</asp:ListItem>
<asp:ListItem>France</asp:ListItem>
<asp:ListItem>Germany</asp:ListItem>
</asp:DropDownList>
</td>
<td rowspan="1">
<asp:RequiredFieldValidator ID="RequiredCountry" runat="server" ControlToValidate="DropDownListSelectCountry" ErrorMessage="Please select a country." InitialValue="Select country" CssClass="validationError"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="auto-style2" rowspan="1"> </td>
<td class="auto-style7" rowspan="1">
<asp:Button ID="submit" runat="server" Text="Button" />
</td>
<td rowspan="1"> </td>
</tr>
</table>
</div>
</form>
<script type="text/javascript" src="scripts/customScripts.js"></script>
</body>
</html>