Jquery验证和更新面板在一起

时间:2011-07-10 19:01:44

标签: asp.net jquery-plugins jquery-validate updatepanel

我正在使用jQuery Validation Plugin 1.8.1。它正如预期的那样完美运行但是当我在我的内容页面上添加了一个更新面板时问题就开始了。我已经添加了

    $(function () {
     //Code that runs before update panel is fired.

    //Listen for update panel
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
    //Re-initialize jquery after an auto post back.
    function EndRequestHandler(sender, args) {
        Validate();
    } 
});

在我的更新面板中,在每个Partial Post Back中调用我的Validate方法,这样就像这样写在母版页

    <script type="text/javascript">

    $().ready(function() {

    Validate();

    });
    </script>

    <script type="text/javascript">
    function Validate();
    {
    var container = $('div.container');
// validate the form when it is submitted
var validator = $("#form2").validate({
    errorContainer: container,
    errorLabelContainer: $("ul", container),
    wrapper: 'li',
    meta: "validate"            
});  
    }
    </script>         

只需添加此更新面板,我就可以看到当我按下“提交”按钮表单时,它会验证并显示所需的消息几乎不到2秒,然后提交表单。 解决方法是什么?

3 个答案:

答案 0 :(得分:3)

订阅initializeRequest事件并检入事件处理程序是否有效。如果不是取消回发:

Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(instance_initializeRequest);

function instance_initializeRequest(sender, args) {
        if (!$("#form2").validate().form()) {
            args.set_cancel(true);
        }
    }

答案 1 :(得分:1)

我不确定我是否明白这一点,但IMO你应该在验证错误的情况下中止回发:

Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(InitializeRequest);

function InitializeRequest(sender, args)
{
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (! Validate()) {
        prm.abortPostBack();
    }    
}

答案 2 :(得分:0)

这里通过添加此代码我的问题,即尽管有验证错误,但是它已经解决了但是它引入了一个新的,现在通过选择主下拉列表,我的子下拉列表没有填充我已经从代码后面检查了填充子下拉列表的目标方法根本没有触发......

  <asp:UpdatePanel ID="updRole" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
    <script type="text/javascript" >
        Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest    (instance_initializeRequest);
        function instance_initializeRequest(sender, args) {
            if (!Validator())
             {                
                args.set_cancel(true);
             } 
          } 
       </script>
    </ContentTemplate>
    </asp:UpdatePanel>

我在母版页中有一段代码,其中validator()函数在默认情况下触发的.ready()事件中被触发,但问题是在任何内容页面中添加更新面板是方法正在触发(验证错误也是显示2秒)但页面正在回发。

    <script type="text/javascript">
        $.validator.setDefaults({
        invalidHandler: function (form, validator) {    
    alert(“hi”);
        }
    });

    $().ready(function () {
        Validator();         

    });

    function Validator() {

        var container = $('div.container');
        // validate the form when it is submitted
        var validator = $("#form1").validate({
            errorContainer: container,
            errorLabelContainer: $("ul", container),
            wrapper: 'li',
            meta: "validate"
        });
    }