Stop postback after reseting Jquery validation by javascript in ASP.NET Code

Question

I have one form inside that form there are two buttons and two text box and after clicking first button validation appears for first textbox field after clicking second button validation of first textbox disappears but with post back .

How can I prevent post back while reseting jquery validation.

      <form id="form1" runat="server">

                    <div id="div1" class="form-horizontal">
                                            <div class="form-group">
                                                <div class="col-md-3">
                                                    <asp:TextBox  ID="TextBox1" runat="server"></asp:TextBox>  
                                                </div>

                                            </div>
                                            <div class="form-group">
                                                <div class="col-md-3">

                                                    <asp:Button ID="Button1"  CssClass="submit btn btn-primary " runat="server" Text="Submit" />
                                                </div>
                                            </div>
                                        </div>


                            <div id="div2" class="form-horizontal">
                                            <div class="form-group">
                                                <div class="col-md-3">

                                                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                                                     </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-md-3">
                                                    <asp:Button ID="Button2" CssClass="btn btn-primary" runat="server" Text="Submit" />
                                                </div>
                                            </div>
                                        </div>
                </form>




<script>
        $(document).ready(function () {
            $('#Button1').click(function () {
                $('#form1').validate({
                    errorClass: 'help-block animation-slideDown',
                    errorElement: 'div',
                    errorPlacement: function (error, e) {
                        e.parents('.form-group > div').append(error);
                    },
                    highlight: function (e) {
                        $(e).closest('.form-group').removeClass('has-success has-error').addClass('has-error');
                        $(e).closest('.help-block').remove();
                    },
                    success: function (e) {
                        e.closest('.form-group').removeClass('has-success has-error');
                        e.closest('.help-block').remove();
                    }, 
                         rules: {
                             'TextBox1': {
                                required: true,
                            },
                        },
                        messages: {
                            'TextBox1': {
                                required: 'ProvideYourCurrentPassword',
                            },
                        },
                });
                $("#TextBox2").rules('remove');
            });
            $('#Button2').click(function () {
                $('#form1').validate({
                    errorClass: 'help-block animation-slideDown',
                    errorElement: 'div',
                    errorPlacement: function (error, e) {
                        e.parents('.form-group > div').append(error);
                    },
                    highlight: function (e) {
                        $(e).closest('.form-group').removeClass('has-success has-error').addClass('has-error');
                        $(e).closest('.help-block').remove();
                    },
                    success: function (e) {
                        e.closest('.form-group').removeClass('has-success has-error');
                        e.closest('.help-block').remove();
                    },

                    rules: {
                             'TextBox2': {
                                required: true,
                            },
                        },
                        messages: {
                            'TextBox2': {
                                required: 'ProvideYourCurrentPassword',
                            },
                        },
                });
                $("#TextBox1").rules('remove');
            });
        });
    </script>

write e.preventDefault() for each button and once formvalidation is done based on valid or not just submit the form or keep it as it is.. — Guruprasad J Rao
– Guruprasad J Rao, Commented Oct 1, 2015 at 12:23

Riddi Kumar Shrestha · Accepted Answer · 2015-10-02 08:45:15Z

Try this script, it may help you.

<script>
        $(document).ready(function () {
            $('#form1').validate({
                errorClass: 'help-block animation-slideDown',
                errorElement: 'div',
                errorPlacement: function (error, e) {
                    e.parents('.form-group > div').append(error);

                },
                highlight: function (e) {
                    $(e).closest('.form-group').removeClass('has-success has-error').addClass('has-error');
                    $(e).closest('.help-block').remove();
                },
                success: function (e) {
                    e.closest('.form-group').removeClass('has-success has-error');
                    e.closest('.help-block').remove();
                },
            });
            $('#Button1').click(function () {
                $("#TextBox1").rules("add", { required: true, messages: { required: '<%=ValidationMessage.ProvideYourCurrentPassword%>' } });
                $("#TextBox2").each(function () {
                    $(this).rules('remove');
                });
            });


            $('#Button2').click(function () {
                $("#TextBox2").each(function () {
                    $(this).rules('add', {
                        required: true
                    });
                });
                $("#TextBox1").each(function () {
                    $(this).rules('remove');
                });
            });

        });
    </script>

Tummala Krishna Kishore · Accepted Answer · 2015-10-01 13:06:54Z

0

Post your Jquery Code inside the Sys.Application.add_load

$(function(){
            Sys.Application.add_load(function () { 
           // your Java script Code here
                   });

            });

answered Oct 1, 2015 at 13:06

Tummala Krishna Kishore

8,2814 gold badges36 silver badges52 bronze badges

1 Comment

Vishal Shrestha Over a year ago

after putting my jquery code inside Sys.Application.add_load jquery validation stopped working but thanks for reply

Collectives™ on Stack Overflow

Stop postback after reseting Jquery validation by javascript in ASP.NET Code

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related