Why does my custom javascript prevent the validators from firing.

Question

In .NET 2.0, I have several client side validators ala the .NET validator controls. These run fine when I click a button...until I add my own javascript function to this button. Instead of running in addtion to the validators, it seems to prevent them from running at all.

To be clear, the validator controls are basic required field validators, and here is the javascript I added:

    <script language="javascript">
function yaya()
{
    var chkAmount = document.frmSearchFor.txtCheckAmount.value;
    var amtApplied = document.frmSearchFor.lblAmountApplied.value;
    if  (amtApplied < chkAmount)
    {
        return confirm('Continue?');
    }
}
</script>

And it's tied to the button like this...

OnClientClick="return yaya();

Answer 1

those are probably not the ID's being rendered to your page. Try this:

function yaya()
{
    var checkAmount = parseFloat(document.getElementById("<%=txtCheckAmount.ClientID %>").value);
    var amoutApplied = parseFloat(document.getElementById("<%=lblAmountApplied.ClientID %>").text);
    if  (amoutApplied < checkAmount)
    {
        return confirm('Continue?');
    }
}

And try attaching it like this:

OnClientClick="javascript:yaya();";

Answer 2

Client-side validation is done via javascript just like your client click. When you specify the client-side event, I'm guessing there's nowhere for the validation code to attach. You may need to modify either the validation code to call your function, or your function to call the validation code. Probably the latter is easier. Instead of assigning OnClientClick at design time, add a client script that stores the current click handler function, creates a function that runs your code and then runs the stored handler function, and attaches that new function as the click handler.

<script>
var baseHandler = myElement.onclick;

myElement.onClick = function() {
    // run your code here
    baseHandler();
}
</script>

Answer 3

issue is that you are specifying a return in your OnClientClick attribute. when the page renders, it comes out like this

<input ... onclick="return yaya();WebForm_DoPostBackWithOptions...

after yaya completes, the onclick function concludes and I believe it's shutting down any further action that would normally happen before the form is submitted. it's kind of ugly but you can get around this by only having a return when your function evaluates to false:

OnClientClick="if (!yaya()) { return false; }"

for this to work you should also include return true; at the end of your function in case the conditions for the if check are not met.

you may also be having issues with references to elements as Hunter mentions but you're not providing your markup to verify that.