Category >
ASP.NET
|| Published on :
Thursday, February 18, 2016 || Views:
10765
||
Validate ASP.Net form using CSS in C# Validate ASP.Net form using CSS
Introduction
Here Pawan Kumar will explain how to Validate ASP.Net form using CSS in C#
Description
In previous post I have explained
Best 7 Resources for 3 tier architecture Asp.Net,
Show Hide Password Using Javascript ASP.NET,
How to Create Tab Control Using jQuery In Asp.Net,
jQuery Datepicker Calendar With Slide Down Effect In Asp.Net,
jQuery Code To Select Multiple Item By Pressing Ctrl Button In Asp.Net,
How to bind dropdown list with XML file in asp.net?, and many more articles.
Now I will explain How to Validate ASP.Net form using CSS in C#
So follow the steps to learn Validate ASP.Net form using CSS in C#
ASPX Code:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<title>Validate ASP.Net form using CSS in C#</title>
</head>
<body>
<form id="form1" runat="server">
<div class="field-box control-group">
<label class="span4">
Note:</label>
<textarea name="Text1" class="span3" cols="40" rows="5" id="txt_Note" runat="server"></textarea>
<span style="color: red; display: none;">Please enter the note..</span>
</div>
<div class="field-box control-group">
<label class="span4">
Tag:</label>
<input class="span3" id="txt_tag" type="text" runat="server" />
<span style="color: red; display: none;">Please enter the tag..</span>
</div>
<div class="field-box control-group">
<label id="lblstatus">
</label>
</div>
<div class="span6 field-box actions">
<input type="button" id="btnClose" class="btn-glow primary" value="Close"> </input>
<input type="button" class="btn-glow primary" id="btnSubmit" value="Add New" onclick="return fnValidate();" />
</div>
</form>
<script type="text/javascript">
function fnValidate() {
if ($('#txt_Note').val() == "") {
$('#txt_Note').css("border", "1px solid red");
$('#txt_Note').next('span').show();
return false;
}
else {
$('#txt_Note').css("border", "1px solid #000");
$('#txt_Note').next('span').hide();
}
if ($('#txt_tag').val() == "") {
$('#txt_tag').css("border", "1px solid red");
$('#txt_tag').next('span').show();
return false;
}
else {
$('#txt_tag').css("border", "1px solid #000");
$('#txt_tag').next('span').hide();
}
$('#lblstatus').text('Success').css('color', 'green');
}
</script>
</body>
</html>
Output:-
Conclusion:
So, In this tutorial we have learned, Validate ASP.Net form using CSS in C#
Download Source Codes