custom validator for controls in ascx

[Geoff]

Hi,
    I'm using a RadGrid with a popup form for editing and inserting records based on the excellent Edit Form types demo. Everything I used from the demo works fine but I ran into a problem with validation. Unlike the demo I'm using some controls that can only be validated using a custom validator function (RadEditor and RadRating).
 
At first, I put the functions in the user control (ascx file) but this is obviously not the thing to do because I got an error when the functions were called saying that they were undefined.

I moved the functions to the parent aspx file (with the gridview in it) and now the functions are recognised OK. The snag no is that I don't know how to access the values I want to validate. I had already found out that the standard approach (args.value) doesn't work because the value isn't sent to the function from these controls. I found the following example on a forum somewhere but it only works when the script is in the ascx file.

$find("<%= rr_Q1a.ClientID %>").get_value()

What syntax do I need to gain client-side access the values of the controls that are in the ascx file from the parent aspx file? or is there another way I should do this?

[Princy]

Hi Geoff,

Please try the following code snippet to have CustomValidator in UserControl form.

ASCX:

<telerik:RadTextBox ID="RadTextBox_ShipCity" runat="server" Text='<%# DataBinder.Eval( Container, "DataItem.ShipCity"  ) %>'>

</telerik:RadTextBox>

 

<asp:CustomValidator ID="CustomValidator1" ControlToValidate="RadTextBox_ShipCity" 
  ClientValidationFunction="clientValidation" Display="Dynamic" ErrorMessage="Invalid!"
 Text="Sholud not start with A" ForeColor="Red" Font-Name="verdana" Font-Size="8pt" runat="server" />

ASCX:JS:

<script type="text/javascript">
    function clientValidation(source, arguments) {
        debugger;
        var currentCell = source.parentNode;
        var currentRow = currentCell.parentNode

        //get a reference to the calling validator control
        var CustomValidator1 = source.id;

        //get the value of the  'ShipCity'
        var ShipCity;
        ShipCity= document.getElementById(CustomValidator1.replace('CustomValidator1', 'RadTextBox_ShipCity')).value;
        ShipCity= $telerik.findElement(currentRow, "RadTextBox_ShipCity").value;
        //Your logic here to determine
        //arguments.IsValid = false
        //or
        //arguments.IsValid = true
    }
</script>

Thanks,
Princy

[Geoff]

Princy,
    Thank you for your prompt response. I tried your code just as it was (but with the DataBinder set to one of my DB columns) but got the same error as I had when I had previously tried this myself. The JavaScript validation function is not recognised when it is in the ASCX file. The error I get is: "Microsoft JScript runtime error: 'clientUnitPriceValidation' is undefined".
 
When the page is run and I select "View Source" from the browser, none of the JS on the ASCX file is there but all the JS on the ASPX file is there. Even if I just put a little script block like:

<script type="text/javascript">
    alert('Hello World');
</script>

It doesn't run in the ASCX but works fine on the ASPX. Somehow code in the ASCX just doesn't seem to count. Can you offer any other ideas?

Geoff

[Geoff]

Ah, right hang on, I think I've got it. You meant put the JS in the ASPX file not the ASCX right? I've just tried it out and it works fine, so thank you very much.

For anybody else copying this, please not that the snippet Princy supplied needs a small modification. The client validation function property on the custom validator should read:
 ClientValidationFunction="clientUnitPriceValidation"
 not:
 ClientValidationFunction="clientValidation"

I think the note above the JavaScript should read "ASPX:JS:" not "ASCX:JS:". Have I got that right Princy?

[Princy]

Hi Geoff,

Sorry for that error, yes the function name is clientValidation. I have modified the code. The JS code works in the ASCX page as well as ASPX page for me.

Thanks,
Princy

[Geoff]

Princy,
    OK, well you've solved my problem so thanks again.
 
I have no clue why JavaScript isn't working in my ASCX, I had a look around on the Web and found a number of forum posts with a similar issue and the advice given was to move the code to the parent ASPX.

Anyway, I've got a working solution so I'm happy.