Client-Side Validation in a Modal Popup?

Question

I've got a gridview/formview, master/detail relationship going on.

When I click a button in my formview (item template), I display an ajaxcontroltoolkit modal popup.

On this popup there is a textbox (several, actually). I want to validate the data in this textbox (at least six digits, so far I'm using a regex validator) before I dismiss the popup.

The validator works, but I can still dismiss the form by clicking OK. What I'd like to do is have the ok button on the popup disabled until the data is good.

I have tried fiddling with some stuff in javascript, but I couldn't make it work, as there seems to be some issues regarding finding controls in a formview.

Any ideas?

Thanks in advance.

Answer 1

Without a postback

You should be able to find a control using the following technique in JavaScript:

$document.getElementById('<%=btnSubmitForm.ClientID%>').disabled = true;

If you're using RegularExpressionValidator, this forum suggests a quick (albeit hacky) way to check and see if your form is valid, without doing a postback: http://forums.asp.net/t/1114240.aspx

With a postback

You could put the Submit button in its own UpdatePanel, if it isn't already in one, and enable/disable it in the code behind, depending on the value of the validator's IsValid property.

If you're unable to get the enable/disable functionality working, you could simply keep the modal open, so the user can't close it until they enter valid inputs or click Cancel:

protected void BtnSubmitClick(object sender, EventArgs e)
{
    if (!regexValidator.IsValid)
    {
        modalPopupExtender.Show();
    }
}