比较验证器不会停止回发

Question

Below is my mark up. 

<asp:TextBox ID="txtPatientDateOfBirth" runat="server" 
    CssClass="rightDivInnerControls" ClientIDMode="Static" 
    CausesValidation="True">
</asp:TextBox>
<asp:CompareValidator ID="cvPatientDateOfBirth" runat="server" 
    ErrorMessage="Enter proper date." 
    Type="Date" ControlToValidate="txtPatientDateOfBirth" Font-Bold="True"  
    Operator="DataTypeCheck"
    ValidationGroup="FirstPreview">
</asp:CompareValidator>    

<asp:Button ID="btnSaveChanges" runat="server" 
    Text="Save Changes"  OnClientClick="return showFinalReviewAlert();" 
    CssClass="btnPrimary hideInPrint btnEditFinalReport" 
    ValidationGroup="FirstPreview" 
    onclick="btnSaveChanges_Click"  ClientIDMode="Static"/>

When I change the date to a wrong format it shows me the error message immediately.

But when I click on the button "btnSaveChanges" it does a postback. I think something is missing because of which it is doing postback.

Can anyone please help me with the issue. I want to stop the postback if validation fails .

Thanks.

Answer 1

Actually, the way these ASP.NET Validators work (described here: Validating User Input in ASP.NET Web Pages ) is a bit different from what you're expecting - it's supposed to postback. From the linked MSDN document:

When the user submits a page to the server, the validation controls are invoked to check the user input, control by control. If a validation error is detected in any of the input controls, the page itself is set to an invalid state so you can test for validity before your code runs.

Emphasis mine. When they say "set the page to an invalid state", they are referring to the Page.IsValid property. So, when you're server-side code runs, you would need to wrap it in a block like this:

if(Page.IsValid)
{
    // Run code now that validation has been verified.
}

In order to prevent a postback entirely, you would need to just use JavaScript (client-side code) in order to disable the submit button until all of your controls are in a valid state.

Answer 2

By returning the value of showFinalReviewAlert(); in the OnClientClick of the button, you are blocking the page validation from happening.

This is effectively the HTML that is being rendered (simplified for viewing)...

<input type="submit" 
       id="btnSaveChanges" 
       onclick="return showFinalReviewAlert();WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;btnSaveChanges;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" 
       name="btnSaveChanges">

The important bit of this is...

onclick="return showFinalReviewAlert();WebForm_DoPostBackWithOptions....

What it means is that no matter what showFinalReviewAlert() returns, the WebForm_DoPostBackWithOptions will never be reached. However, because it is an <input type="submit"> the page will post-pack to the server anyway.

So, if the return value of the showFinalReviewAlert must stop the post-back from happening by returning the value false , you should set the OnClientClick attribute as this...

OnClientClick="if(showFinalReviewAlert()==false){return false;}"

In other words, if showFinalReviewAlert return false then stop the button from continuing any post-back processing... but if it return true , then allow the post-back validation to take place.

On the other hand, if the result of showFinalReviewAlert() doesn't matter... simply remove the return to give simply...

OnClientClick="showFinalReviewAlert();"

Answer 3

Add OnClientClick as well as Onclick event in your server control asp:button,

asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_OnClick" OnClientClick ="if(validateTotal()==false){return false;}"

If function OnClientClick event will return false then it will not postback.

your validateTotal() may be like this,

function validateTotal() 
{
    if (parseInt($('.lblTotal').text().trim()) > 100) {
        alert("Please check total value, it should not be more than 100%");
        return false;
    }
}

Answer 4

You're missing ValidationGroup in the TextBox control.

<asp:TextBox ID="txtPatientDateOfBirth" runat="server" 
    CssClass="rightDivInnerControls" ClientIDMode="Static" 
    CausesValidation="True"
    ValidationGroup="FirstPreview">
</asp:TextBox>

Answer 5

It is because you have used:

OnClientClick="return showFinalReviewAlert();"

What you are doing in showFinalReviewAlert();" ?

What you can do inside showFinalReviewAlert();" is add return false that will stop Postback of the page.

<script language="javascript">
    function showFinalReviewAlert() {
        //
        //   Your coding stuffs...
        //
        return false;
    }
</script>