OnClick not firing when using both OnClick and OnClientClick

Question

I've inherited a system that I'm now trying to alter by adding validation.

I've attempted to put the validation method on the Client click, and depending on whether it fails or not, change the viewstate to the next page.

However, the OnClick method is not being called when the ClientClick returns true.

Here is the aspx button;

<asp:Button ID="btnSaveMile"  UseSubmitBehavior="false" OnClick="btnSaveMile_OnClick" OnClientClick="return milestoneDateValidation()" Width="149" CssClass="button"
                             runat="server" Text="Save For Later" />

How it gets rendered by Chrome;

<input type="button" name="btnSaveMile" value="Save Edit" onclick="return milestoneDateValidation();__doPostBack('btnSaveMile','')" id="btnSaveMile" class="button ui-button ui-widget ui-state-default ui-corner-all" style="width:149px;" role="button" aria-disabled="false">

The validation (simplified) used to check dates are in chronological order;

function milestoneDateValidation() {
var dateFields = new Array();
var flag = true;
var date1;
var date2;

dateFields = $("#completedDateStage1,  #completedDateStage2,  #completedDateStage3, #completedDateStage4, #completedDateStage5").filter(function() {
    return this.value.length !== 0;
})

var length = dateFields.length;
if (length > 1) {
    for (var i = 1; i < length; i++) {
        date1 = Date.parse(dateFields[i].value.replace(new RegExp("-", "gm"), " "));
        date2 = Date.parse(dateFields[i - 1].value.replace(new RegExp("-", "gm"), " "));

        if (date1 < date2) {
            flag = false;
            break;
        }
    }
}
return flag;
}

The Button click method;

        public void btnSaveMile_OnClick(object sender, EventArgs e)
    {
        SaveMileStones(false);
        Response.Redirect("Default.aspx?ID=" + strCID);
    }

I'm fairly new to web applications, but I can't spot any glaring faults, except that the btnSaveMile_OnClick isn't being called on postback.

Looking at other posts, I've noticed that the button OnClick is rendered as;

onclick="return milestoneDateValidation();__doPostBack('btnSaveMile','OnClick')"

However mine is being rendered as;

onclick="return milestoneDateValidation();__doPostBack('btnSaveMile','')"

Is this insignificant, or is this the problem? If so, why is it blank, or how should I correct it?

I've read many articles here on SO, and tried many solutions, however none have been able to solve this issue, so I'm about ready to start pulling my hair out. Does anyone have any ideas?

Answer 1

As you've seen, when your function returns true or false, it doesn't post back. Modify the OnClientClick logic as follows:

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

So you only return false when the result of your validation is false. Otherwise, it just posts back.