Output:
Html Code:
<!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>Show error
message using css</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>
Comments
Post a Comment