Problems with using CustomValidator for client-side validation

3 posts, 0 answers
  1. Vladimir
    Vladimir avatar
    6 posts
    Member since:
    Sep 2007

    Posted 07 Mar 2011 Link to this post

    Hello, I'm trying to implement custom validation for my web page, but having problem. I want my ComboBox to be populated asynchronously from Web Service. So, here's the code of my page:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CBSamplePage.aspx.cs" Inherits="CBSamplePage" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <head runat="server">
        <title>
            RadComboBox Sample Page
        </title>
         
    </head>
    <body>
        <form id="form1" runat="server">
        <script type="text/javascript">
            function validatePerson(source, args) {
                if ($find("<%=cbPersons.ClientID %>").get_value() > 0) {
                    args.IsValid = true;
                } else {
                    args.IsValid = false;
                }
            }
        </script>
        <div>
            <asp:ScriptManager runat="server" ID="scriptManager1"></asp:ScriptManager>
            <table>
                <tr>
                    <td>
                        <asp:Label runat="server" ID="lbl1">Select something</asp:Label>
                    </td>
                    <td>
                        <telerik:RadComboBox EmptyMessage="Select a person..." runat="server" ID="cbPersons" AllowCustomText="true" EnableLoadOnDemand="true">
                            <WebServiceSettings Method="GetPersons" Path="~/SampleWebService.asmx" />
                        </telerik:RadComboBox>
                        <asp:CustomValidator runat="server" ID="customValrPerson" ValidationGroup="Sample" ControlToValidate="cbPersons" ErrorMessage="Required" ClientValidationFunction="validatePerson"></asp:CustomValidator>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <asp:LinkButton runat="server" ID="lnkSubmit" ValidationGroup="Sample" CausesValidation="true">Submit</asp:LinkButton>
                    </td>
                </tr>
            </table>
        </div>
        </form>
    </body>
    </html>

    And here's the code of the web service that I use for generating ComboBox items:

    <%@ WebService Language="C#" Class="SampleWebService" %>
     
    using System;
    using System.Web;
    using System.Web.Services;
    using System.Web.Services.Protocols;
    using System.Web.Script.Services;
    using Telerik.Web.UI;
     
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [ScriptService]
    public class SampleWebService  : System.Web.Services.WebService {
     
        static string[] persons = { "Person Number 1", "Person Number 2", "Person Number 3", "Person Number 4", "Person Number 5" };
         
        [WebMethod]
        public RadComboBoxItemData[] GetPersons(RadComboBoxContext context)
        {
            RadComboBoxItemData[] result = null;
     
            result = new RadComboBoxItemData[persons.Length];
            for (int i = 0; i < persons.Length; i++)
            {
                result[i] = new RadComboBoxItemData { Text = persons[i], Value = i.ToString() };
            }
             
            return result;
        }   
    }

    So, I have number of problems.

    1) When I load the page and click "Submit" link, validation doesn't happen and page gets post back. Obviously, that's wrong because ComboBox doesn't have any item selected.
    2) When I select an item I see "Required" text. That happens because when validation function is called, this code:
    $find("<%=cbPersons.ClientID %>").get_value()
    returns "undefined". Sure, that's not how I expect things to work. When I click "Submit" link everything works properly. 

    P.S. It can seem that I would use RequiredFieldValidator in this example, but sometimes I will need to change the way selection is validated, so I would prefer to use CustomValidator for this. 
  2.
  3. broctune
    broctune avatar
    6 posts
    Member since:
    Feb 2007

    Posted 31 Mar 2011 Link to this post

    I have this same issue.  Has anyone found a fix for this?

    Dave
  5. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 04 Apr 2011 Link to this post

    Hi broctune,

    Please set the ValidateEmptyText property of the CustomValidator to “true”:
    <script type="text/javascript">
        function validatePerson(source, args) {
            if ($find("<%=cbPersons.ClientID %>").get_value() > 0) {
                args.IsValid = true;
            } else {
                args.IsValid = false;
            }
        }
    </script>

    <telerik:RadComboBox EmptyMessage="Select a person..."
        runat="server" ID="cbPersons"
        AllowCustomText="true" EnableLoadOnDemand="true">
           <WebServiceSettings Method="GetPersons"
            Path="~/SampleWebService.asmx" />
    </telerik:RadComboBox>
    <asp:CustomValidator runat="server" ID="customValrPerson"
        ValidationGroup="Sample"
        ValidateEmptyText="true"
        ControlToValidate="cbPersons"
        ErrorMessage="Required"
        ClientValidationFunction="validatePerson">
    </asp:CustomValidator>


    Greetings,
    Kalina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top