Question

I am having a great deal of trouble with client side validation using JavaScript and jQuery.

I have 2 user controls (.ascx) on a page (.aspx) each with its own button defined as follows

Page
    user control 1
        textbox 1
        textbox 2
        Button 1
    user control 2
        textbox 3
        textbox 4
        Button 2

Both button 1 and button 2 have the same CSS class.
I also have a JavaScript script that is referenced by the page.

Using jQuery I can accurately select the buttons and bind click events to them as follows:

$('.buttonCssClass').click(function() {
    // If the user control fields are not valid then do nothing

    if (typeof (Page_IsValid) == 'undefined' || Page_IsValid) {
        return false;
    }

    // If the user control fields are valid then 
    // disable the button and replace the CSS class and add an image (progress spindle)
    // until the processing is over - this is to prevent the user from clicking multiple              
    // times for long running and async processes.
});

When I click on button 1 I only want to check the fields in that user control for validity – not the all the fields in the page. Right now, all fields in all controls on the page are checked for validity – this means that my JavaScript function always returns false.

Could someone help me out with this?

Answer 1

Specify ValidationGroups so that not the whole page is validated. That works also on clientside:

if(typeof(Page_ClientValidate) == 'function')
    return Page_ClientValidate("MyValidationGroup");

• ASP.NET Validation in Depth(clientside)