Jquery validation does not stop execution of "code behind" code of asp.net button

Question

Hi, I have a asp.net button which has click event which basically adds data into datbase. I also have a radiobuttonlist(i.e Approve / Decline) and a textbox. If user selects decline, the textbox becomes visible. I want to run validation that when user clicks on submit button, if the decline is selected then the textbox can not blank. I have used jquery validation for that. when I click button, the message apppears next to textbox that the field is required but it does not stop the execution of code behind. i.e.It adds data into database. Here is my code.

<script type="text/javascript" language="javascript">



    $(function() {
        $('#declinediv').hide();
        ////////
        var $radBtn = $("table.rblist input:radio");
        $radBtn.click(function() {
            var $radChecked = $(':radio:checked');
            var value = $radChecked.val();
            if (value == 'Decline' || value == 'Approve') {
                if (value == 'Decline')
                    $('#declinediv').show();

                else
                    $('#declinediv').hide();
            }
            else {
                $('#declinediv').hide();
            }

        });
        //////////////////////////

        $("#aspnetForm").validate({
            rules: {
                <%=txtdeclinereason.UniqueID %>: {
                    minlength: 2,
                    required: true
                }
        }, messages: {
            <%=txtdeclinereason.UniqueID %>:{ 
                    required: "* Required Field *", 
                    minlength: "* Please enter atleast 2 characters *" 
                }
        }, onsubmit: true


    });

    //////////////////////////////////

    $('#btnsubmit').click(function(evt){
        var isValid = $("#aspnetForm").valid();

        if (!isValid)
        {
            evt.preventDefault();
            }
    });





});

    function myredirect(v, m, f) {
        window.location.href = v;
    }  

</script>


<table style="border: 1px black solid; text-align: center; vertical-align: middle"
    width="100%">
    <tr>
        <td>
            <asp:RadioButtonList ID="rbtnlstapprover" runat="server" RepeatDirection="Horizontal"
                CssClass="rblist" DataTextField="username" DataValueField="emailaddress">
                <asp:ListItem Text="Approve" Value="Approve" />
                <asp:ListItem Text="Decline" Value="Decline" />
            </asp:RadioButtonList>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="rbtnlstapprover"
                Text="*" ErrorMessage="Please select atleast one Approver" ValidationGroup="approvalgroup"
                Display="Dynamic" />
        </td>
    </tr>
    <tr>
        <td>
            <div id="declinediv">
                <asp:TextBox ID="txtdeclinereason" runat="server" TextMode="MultiLine" Columns="80"
                    Rows="5" />
             </div>
        </td>
    </tr>
    <tr>
        <td>
            <asp:Button ID="btnsubmit" runat="server" Text="Submit" CssClass="RegularButton"
                CausesValidation="true" ValidationGroup="approvalgroup" OnClick="btnsubmit_Click" />
        </td>
    </tr>
</table>

How do I stop the execution of code behind? Thanks for your help.

Edit:

I was able to fix the probelm by adding OnClientClick event for button

if ($('#declinediv').is(':visible'))
{

     var isValid = $("#aspnetForm").valid();
     alert(isValid);

    if (isValid)
        return true;
    else
        return false;

}
else
{
    return true;
}

Answer 1

Are you sure it is validating firs of all? Put a "debbuger" in if statement. I think you need to use ClientId not UniuqueId.

Answer 2

The function handling the submit button should return true if validation passed, and false if validation failed.
I am not sure if the code there attaches another event handler or replaces it. IF the event handler is only attached and both events fire with jquery magic, simply returning false may not work.

Also you are saying that records are still being added to the database. This means that you do not have server side validation backing up your client side validation. Any jquery validators can be bypassed so you should make sure to check again on the server.

Answer 3

Set the button's OnClientClick property to your javascript function to validate. If it doesn't validate, have your javascript function return false and the page will not post back.

<asp:Button ID="btnsubmit" runat="server" Text="Submit" CssClass="RegularButton"
                CausesValidation="true" ValidationGroup="approvalgroup" OnClick="btnsubmit_Click" OnClientClick="return(jsValidate());" />