I have created a simple webform using the designer in ASP.net (Vs2013). The system really works well, I only had to use a few textboxes and custom validation controls from the Toolbox. The form checks client sided if the input is correct and shows an error message if not.
However the errormessage just gets shown on the page in ugly red text atm. I would very much like to mark-up this error message, for example use the Jquery fade-in function on the error or use any custom javascript to hook in this emited js from ASP.
What and where would be the best way to do this?
code:
<%@ 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>