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

By
Advertisement


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">
        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>



0 comments:

Post a Comment

Online Casino