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

Posted by shahk26 on Stack Overflow See other posts from Stack Overflow or by shahk26
Published on 2010-04-23T13:34:41Z Indexed on 2010/04/23 13:43 UTC
Read the original article Hit count: 317

Filed under:
|
|
|

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.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about codebehind