Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
YongMing Tan
20
jquery validation for webforms using WebImageButton
posted

I need client-side validation on my .NET 4.0 webforms web site project using NetAdvantage ASP.NET controls.

I am using the jquery validation for webforms library.

https://github.com/bbraithwaite/JQueryValidationForWebForms

For validation to work, css classes are used.

I tried adding CssStyle on ButtonStyle but it didn't work. The css class had been assigned to a table, or span, or whatnot instead of the input html element.

I tried other ways like adding css class to Attribute collection of the WebImageButton instance during run-time. Didn't work either.

How do I assign a css class the the input element of a rendered WebImageButton at design time or programmatically at least?

Is there documentation or guide to provide best practices of using Javascript libraries, frameworks with Infragistics NetAdvantage ASP.NET AJAX controls to minimize conflicts, errors, and trip ups?

Thank you.

Parents
No Data
Reply
  • 24497
    Suggested Answer
    posted

    Hi YongMing,

    The "invisible" INPUT used by WebImageButton has "id" equals to the ClientID and it has "name" equals to UniqueID. So, you might use that to get reference to it. Also, javascript objects which represents WebImageButton, has getElementAt(id) method, which allows to get reference to any child element used by WebImageButton. To get INPUT, the id should be 0.

    Below are examples for both options. You may use either of them.

    1. Find by ClientID:
    protected void Page_Load(object sender, EventArgs e)
    {
      this.WebImageButton1.ClientSideEvents.Initialize = "document.getElementById('" + this.WebImageButton1.ClientID + "').className = 'myCss'";
    }

    2. Find by getElementAt(id):
    <script type="text/javascript">
          function WebImageButton1_Initialize(oButton) {
            oButton.getElementAt(0).className = "myCss";
    }
    </script>
    <igtxt:WebImageButton ID="WebImageButton1" runat="server">
          <ClientSideEvents Initialize="WebImageButton1_Initialize" />
    </igtxt:WebImageButton>

Children
No Data