traiplydeappy
New Member
I want to keep ASP.NET validations but need to make some UI changes to it. I'm new to CSS/jQuery and I got pretty far but have problems with positioning.My goal is to:[*]Highlight actual error field (ASP.NET can't do) - Check![*]Show error message as div that pops on top of input box. Let's say over top right corner. Problem!Here is CSS: (validations is my CSS and 2 column layout - got CSS from SOF)\[code\]<style> .inputError { border: 1px solid #006; background: pink; } .divError { padding: 0;margin: 0; border: 1px solid black; background: red; top: -10px; } label { float:left; width:120px; text-align:right; margin-right:5px; } input[type="text"] { width: 150px; } .left-column, .right-column { float:left; } .left-column p, .right-column p { padding-bottom: 10px; } .left-column { margin-right:5px; }</style> \[/code\]Here is my HTML:As you see I have ASP.NET validators setup\[code\]<div class="left-column"> <p> <label>Company Name:</label> <asp:TextBox ID="CompanyNameTextBox" runat="server" MaxLength="255" /> <asp:RequiredFieldValidator ID="CompanyNameRequiredFieldValidator" runat="server" ControlToValidate="CompanyNameTextBox" Display="Dynamic"> Please enter company name </asp:RequiredFieldValidator> </p> <p> <label>Phone:</label> <asp:TextBox ID="PhoneNumberTextBox" runat="server" MaxLength="255" /> <asp:RequiredFieldValidator ID="PhoneNumberRequiredFieldValidator" runat="server" ControlToValidate="PhoneNumberTextBox" Display="Dynamic"> Please enter phone number </asp:RequiredFieldValidator> </p> </div> <div class="right-column"> <p> <label>Contact Name:</label> <asp:TextBox ID="ContactNameTextBox" runat="server" MaxLength="255" /> <asp:RequiredFieldValidator ID="ContactNameRequiredFieldValidator" runat="server" ControlToValidate="ContactNameTextBox" Display="Dynamic"> Please enter contact name </asp:RequiredFieldValidator> </p> <p> <label>Email:</label> <asp:TextBox ID="EmailTextBox" runat="server" MaxLength="255" /> <asp:RequiredFieldValidator ID="EmailRequiredFieldValidator" runat="server" ControlToValidate="EmailTextBox" Display="Dynamic"> Please enter email address </asp:RequiredFieldValidator> </p> </div>? <div> <asp:Button ID="SubmitButton" runat="server" Text="Submit Request" onclick="SubmitButtonClick" /> </div>\[/code\]I make Display="Dynamic" for validators so they don't break layout. I stepped through ASP.NET validation javascript and found function that toggles spans for validation messages. Created my own and placed on a bottom. I got EVERYTHING done, now I just need to figure out how to position DIV over textbox so it overlays on a corner without breaking layout. \[code\]<script type="text/javascript"> // Hijacking ASP.NET validation // This need to be placed low on page in order to execute function ValidatorUpdateDisplay(val) { // For control we validate - style it according to validation status var $input = $("#" + val.controltovalidate); val.isvalid ? $input.removeClass("inputError") : $input.addClass("inputError"); // remove all elements with same ID, doing it via selector will make sure DIV and SPANs removed var $val = $(val); $("#" + $val[0].id).remove(); // When need to display - insert custom DIV after control if (!val.isvalid) { var $div = $("<div/>") .attr("id", $val[0].id) .addClass("divError") .text($val.text()) .hide(); $div.insertAfter($input); $div.show("fast"); } } </script>\[/code\]Finally what I'm getting and what I'd like to see:
I beleive I'm 99% there it is just positioning of DIVs that I can't figure out..