Showing posts with label Validation. Show all posts
Showing posts with label Validation. Show all posts

Monday, April 30, 2012

Custom validator with Client side and Server side Validation


The simple Example of Custom validator with Client side validation is shown as below.The Example is about the From Year should be Less than the To Year.

Client side

 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" language="javascript">
        function CustomValidate(sender, args) {
            if (document.getElementById('ddlfromyear').selectedIndex > document.getElementById('ddltoyear').selectedIndex) {
                args.IsValid = false;
            }
            else {
                args.IsValid = true;
            }
        }

    </script>
</head>
<body>
    <form id="form1" runat="server" >
    <div>
    From:
    <asp:DropDownList ID="ddlfromyear" runat="server" ValidationGroup="aa"></asp:DropDownList>

    To:
    <asp:DropDownList ID="ddltoyear" runat="server" ValidationGroup="aa"></asp:DropDownList>

    <asp:CustomValidator ID="custvaddropdown" runat="server" ValidationGroup="aa" ClientValidationFunction="CustomValidate" ControlToValidate="ddlfromyear" ErrorMessage="From Year should be Less than the To Year." Text="From Year should be Less than the To Year."></asp:CustomValidator>
    <asp:Button ID="btntest" runat="server" Text="Test" ValidationGroup="aa" />

    </div>
     </form>
</body>
</html>

.aspx.cs Page code


    protected void Page_Load(object sender, EventArgs e)
    {
            BindDropDown();
          
     }

        private void BindDropDown()
        {
            for (int i = 1990; i < 2012; i++)
            {
                ddlfromyear.Items.Add(i.ToString());
                ddltoyear.Items.Add(i.ToString());
            }
        }

The custom validation for server side :


I am showing you how to use custom validator with server side validation...
The Practical that i am showing you is about the textbox length should be eight character or more than that.if its length is less than 8 character then it will shown an error on Page.

.aspx Page

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Custom validator with ServerSide</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:CustomValidator ID="CustomValidator1" runat="server" OnServerValidate="TextValidate"
            ControlToValidate="TextBox1" ErrorMessage="Text must be 8 or more characters.">
        </asp:CustomValidator><br />
        <asp:Button ID="btnClick" runat="server" Text="Check" OnClick="btnClick_Click" />
    </div>
    </form>
</body>
</html>

.aspx.cs Page

namespace CustomValidator
{
    public partial class ServerSideCustomValidator : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        protected void TextValidate(object source, ServerValidateEventArgs args)
        {
            if (args.Value.Length >= 8)
            {
                args.IsValid = true;
            }
            else
            {
                args.IsValid = false;
            }
          
        }

        protected void btnClick_Click(object sender, EventArgs e)
        {
            if (Page.IsValid)
            {
                Response.Redirect("~/ClientSideCustomValidator.aspx");
            }
        }
    }
}

Download sample from here......
Download

Validation For DropdownList with First Value is "Select" and How to use Javascript and Server Side validation in same Page.....


if you want to use both server side validation and javascript in one page then you have to include  Page_ClientValidate(); in Javascript otherwise it will not check the server side validation..In Actual senario browser check the server side validation and display the error but javascript will return the true value so it will go ahead with the next code...for Example

.aspx page code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
         function validate() {
        
          
            if (document.getElementById('ddlfrommonth').selectedIndex >= document.getElementById('ddltomonth').selectedIndex) {
                alert("Error");
                return false;
            }
            else {
                Page_ClientValidate();
                return Page_IsValid;
            }
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
     <asp:TextBox ID="txtname" runat="server" ></asp:TextBox>
    <asp:RequiredFieldValidator ID="reqtxtname" runat="server"  ControlToValidate="txtname" ErrorMessage="name required" Text="name required"></asp:RequiredFieldValidator>
  
  
   From
    <asp:DropDownList ID="ddlfrommonth" runat="server">
    <asp:ListItem Selected="True" Text="Select"></asp:ListItem>
    <asp:ListItem  Text="January"></asp:ListItem>
    <asp:ListItem  Text="February"></asp:ListItem>
    <asp:ListItem  Text="March"></asp:ListItem>
    <asp:ListItem  Text="April"></asp:ListItem>
    <asp:ListItem  Text="May"></asp:ListItem>
    <asp:ListItem  Text="June"></asp:ListItem>
    <asp:ListItem Text="July"></asp:ListItem>
    <asp:ListItem Text="August"></asp:ListItem>
    <asp:ListItem Text="September"></asp:ListItem>
    <asp:ListItem Text="October"></asp:ListItem>
    <asp:ListItem Text="November"></asp:ListItem>
    <asp:ListItem Text="December"></asp:ListItem>
    </asp:DropDownList>
    <asp:RequiredFieldValidator ID="ReqFrommonth" runat="server" InitialValue="Select" ControlToValidate="ddlfrommonth" ErrorMessage="From Month Required" Text="*"></asp:RequiredFieldValidator>
    To
    <asp:DropDownList ID="ddltomonth" runat="server">
     <asp:ListItem Selected="True" Text="Select"></asp:ListItem>
    <asp:ListItem  Text="January"></asp:ListItem>
    <asp:ListItem  Text="February"></asp:ListItem>
    <asp:ListItem  Text="March"></asp:ListItem>
    <asp:ListItem  Text="April"></asp:ListItem>
    <asp:ListItem  Text="May"></asp:ListItem>
    <asp:ListItem  Text="June"></asp:ListItem>
    <asp:ListItem Text="July"></asp:ListItem>
    <asp:ListItem Text="August"></asp:ListItem>
    <asp:ListItem Text="September"></asp:ListItem>
    <asp:ListItem Text="October"></asp:ListItem>
    <asp:ListItem Text="November"></asp:ListItem>
    <asp:ListItem Text="December"></asp:ListItem>
    </asp:DropDownList>
    <asp:RequiredFieldValidator ID="Reqddltomonth" runat="server" InitialValue="Select" ControlToValidate="ddltomonth" ErrorMessage="To Month Required" Text="*"></asp:RequiredFieldValidator>
  
    <asp:Button ID="btntest" runat="server" Text="Validate"
            OnClientClick="return validate();" onclick="btntest_Click"/>
     </div>
    </form>
</body>
</html>

.aspx.cs page code

protected void btntest_Click(object sender, EventArgs e)
{
      Response.Redirect("~/test.aspx");
}

if you dont include the Page_ClientValidate and return Page_IsValid; in Page then it will simply redirect the test.aspx page without if you dont write anything in textbox..means require field for Textbox will not be executed....