0

I have a grid control that allows users to add a value into the grid.

It produces the following link for inserting a brand new item.

<a onclick="if(!$find('radGridHolidays_ctl00').insertItem()) return false;" id="radGridHolidays_ctl00_ctl02_ctl02_PerformInsertButton" href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("radGridHolidays$ctl00$ctl02$ctl02$PerformInsertButton", "", true, "", "", false, true))'>Insert</a>

I have some custom jQuery code that validates textboxes before the submit. I am trying to prevent the link from submitting the __doPostBack, but my code isn't working.

    // if need be, move this to its own .js file
    String.prototype.trim = function() { return this.replace(/^\s+|\s+$/, ''); };

    // Document loaded, let's register some validation
    $(function() {

        $('#holidayValidationDisplay').hide();

        $('a#radGridHolidays_ctl00_ctl02_ctl02_PerformInsertButton').click(function(e) {

            e.stopImmediatePropagation();
            e.preventDefault();
            var hasErrors = false;

            // alert('You clicked me!');
            var holidayName = $('#radGridHolidays_ctl00_ctl02_ctl02_validatorHolidayName').val().trim();
            var holidayDate = $('#radGridHolidays_ctl00_ctl02_ctl02_RDIPHolidayDate_dateInput_text').val().trim();

            if (holidayName.length == 0) {
                hasErrors = true;
                $('#holidayList').append('<li>You must provide a holiday name</li>');
            }

            if (holidayDate.length == 0) {
                hasErrors = true;
                $('#holidayList').append('<li>You must provide a holiday date</li>');
            }

            if (hasErrors) {
                $('#holidayValidationDisplay').show();
                return false;
            }
        });
    });

but the link is still firing off when I don't want the postback to occur if there are errors. I saw something about preventing it to work in an UpdatePanel, but I'm not sure that the solution there applies to my scenario.

If anyone has any ideas, I'm all "ears".

coson
  • 8,301
  • 15
  • 59
  • 84

2 Answers2

0

I believe the issue you're having is that the button has no knowledge if the form is valid or not. This is what I do:

Write a custom function that returns true or false based on some other value:

function isTermsChecked(oSrc, args)
{
    args.IsValid = $("#chkTerms").is(':checked');
}

So in this example, if my terms checkbox is checked, then args.IsValid is true. Just go to the link properties and there should be a property called OnClientClick. You would put isTermsChecked.

In your specific case, you would probably want to use a variable. If jQuery comes up invalid, set that variable to false, and the custom validation function will reference that variable. Essentially if it's true, the button will proceed, false, and it won't.

EDIT: If you're doing validation on each row, the issue that I see is if one row fails validation then my solution above will make all link buttons disabled until all validation on the grid has passed. You may want to forget the custom function and do this:

If the jQuery validation fails, then find the link button in that row and add an OnClick attribute with the value return false then if validation passes, remove that attribute.

The Muffin Man
  • 19,585
  • 30
  • 119
  • 191
  • the anchor link is auto-generated, so I so I don't have control over the OnClientClick. Maybe I can add that attribute?? – coson May 12 '11 at 19:35
  • @Coson, Yes you can add any attribute you want. The new problem is that since you have a grid, if you one row comes up invalid it will essentially make all of the link buttons not clickable. I will edit my answer. – The Muffin Man May 12 '11 at 19:40
  • I went in a slightly different direction to solve my problem. However, since you gave me the inspiration for that different direction, I'm giving you the heads up. – coson May 13 '11 at 16:20
0

Not directly an answer to your question, but you can create a "dummy" button that does the validation and if successful, clicks the .NET button.

pesudocode:

<a onclick="if(validate()) $('#dotnetbutton').trigger('click')">Submit</a>
<asp:Linkbutton id="dotnetbutton" style="position:absolute;left:-99999px">real submit button</asp:LinkButton>
Jeff
  • 13,943
  • 11
  • 55
  • 103