ASP.Net – Validate form using css in C#.Net

Output:

ASP.Net  - Validate form using css in C#.Net

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”>
        functionfnValidate() {
            if($(‘#txt_Note’).val() == “”) {
                $(‘#txt_Note’).css(“border”, “1px solid red”);
                $(‘#txt_Note’).next(‘span’).show();
                returnfalse;
            }
            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();
                returnfalse;
            }
            else{
                $(‘#txt_tag’).css(“border”, “1px solid #000”);
                $(‘#txt_tag’).next(‘span’).hide();
            }
            $(‘#lblstatus’).text(‘Success’).css(‘color’,‘green’);
        }
    </script>
</body>
</html>

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!