I need to set up validation for both the server and client sides on my registration page. I want a JavaScript function to be called when my TextBox control loses focus (onBlur).
Code in the aspx page
<div id="nameDiv">
<asp:UpdatePanel ID="updatePanelName" runat="server">
<ContentTemplate>
<asp:Label ID="labelName" runat="server" Text="Enter Your Name"></asp:Label>
<asp:TextBox ID="textBoxName" runat="server" placeholder="Enter Your Name"
onBlur="check(this)"></asp:TextBox>
<i class="fa fa-exclamation-circle errorSign" id="errorIcon" runat="server"></i>
<asp:Label ID="labelNameError" runat="server" Text="Name can't be blank" ForeColor="Red">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
Javascript Code
function check(txtBox) {
var errIcon = document.getElementById("<%= errorIcon.ClientID %>");
txt = txtBox.value;
if (txt.length < 1)
errIcon.style.visibility = "visible";
}
CSS
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display:inline-block;
position:relative;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.errorSign{
position:absolute;
margin-right:30px;
left:1050px;
top:220px;
visibility:hidden;
}