在 ASP.NET 代码中通过 javascript 重置 Jquery 验证后停止回发

Posted 2023-05-08

【中文标题】在 ASP.NET 代码中通过 javascript 重置 Jquery 验证后停止回发

【英文标题】：Stop postback after reseting Jquery validation by javascript in ASP.NET Code

【发布时间】：2015-12-29 11:50:57

【问题描述】：

我在该表单中有一个表单，有两个按钮和两个文本框，单击第一个按钮验证后，单击第一个文本框的第二个按钮验证后第一个文本框字段出现，但回发。

如何在重置 jquery 验证时防止回发。

      <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>

【问题讨论】：

为每个button写e.preventDefault()，一旦formvalidation是基于valid或不仅仅是submit表单或保持原样..

【参考方案1】：

试试这个脚本，它可能对你有帮助。

<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>

【参考方案2】：

在Sys.Application.add_load 中发布您的 Jquery 代码

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

            );

【讨论】：

将我的 jquery 代码放入 Sys.Application.add_load 后 jquery 验证停止工作，但感谢您的回复