Error Messages
Question
All replies
-
User-893317190 posted
Hi JagjitSingh,
You could also use jquery validation .
It will control the presentation of error message.
When click the button to submit, it will validate the controls and show the error messages.
After that , whenever you enter words in the textbox, it will validate the control to decide whether to show or hide the error message.
You could control the place to show the error message by providing the error label for the control to validate.
You could also control the style of error message because all the error message have a class named "error".
Below is a small sample. Normally the error message is shown on the next line of the control.
<style> .error{ color:red } </style> <script src="../Scripts/jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script> </head> <body> <form id="form1" runat="server"> <asp:Label ID="Label1" runat="server" Text="firstName:" ></asp:Label> <asp:TextBox ID="firstName" runat="server"></asp:TextBox> <div> <label class="error" for='<%=firstName.UniqueID %>'></label></div> <%--for should be the control's uniqueId --%> <asp:Label ID="Label2" runat="server" Text="lastName:" ></asp:Label> <asp:TextBox ID="lastName" runat="server"></asp:TextBox> <div> <label class="error" for='<%=lastName.UniqueID %>'></label></div> <asp:Label ID="Label3" runat="server" Text="userName:" ></asp:Label> <asp:TextBox ID="userName" runat="server"></asp:TextBox> <div> <label class="error" for='<%=userName.UniqueID %>'></label></div> <asp:Label ID="Label4" runat="server" Text="password:" ></asp:Label> <asp:TextBox ID="password" runat="server" TextMode="Password"></asp:TextBox> <div> <label class="error" for='<%=password.UniqueID %>'></label></div> <asp:Button ID="Button1" runat="server" Text="submit" /> </form> <script> $(function () { $('#form1').validate( { rules: { <%=firstName.UniqueID%> : "required", //please use UniqueId of the control to add rule to the control <%=lastName.UniqueID%>: "required", <%=firstName.UniqueID%>: { required: true }, <%=userName.UniqueID%>: { required: true, minlength: 3 }, <%=password.UniqueID%>: { required: true, minlength: 6 } }, messages: { //error messages to show for the control <%=firstName.UniqueID%>: "please enter your firstname", <%=lastName.UniqueID%>: "please enter your lastname", <%=userName.UniqueID%>: { required: "username is required", minlength: "username should have more than two characters" }, <%=password.UniqueID%>: { required: "plaese enter password", minlength: "password should have more than 5 characthers" } } } ) }) </script>The result.
For more information about jquery validation , please refer to https://jqueryvalidation.org/
Best regards,
Ackerly Xu
