使用xVal MVC禁用提交按钮

时间:2009-09-04 23:10:12

标签: jquery asp.net-mvc xval

我有一个使用xVal的MVC应用程序。我试图挂钩到jquery验证,以在表单有效后显示“加载”图形。当jquery验证表单时,我似乎找不到只显示qraphic的方法。

但是,它还会在单击按钮时禁用按钮,并且未经过验证会阻止用户重新提交表单,客户端错误将得到纠正。

有没有人有这方面的经验。

由于

[R

以下是整个页面来源

<html xmlns="http://www.w3.org/1999/xhtml">
    <head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>

    </title><link href="../Content/wri_mainstyles.css" rel="stylesheet" type="text/css" />

        <script type="text/javascript" src="/Scripts/jquery-1.3.js"></script>
        <script type="text/javascript" src="/Scripts/jquery.validate.js"></script>
        <script type="text/javascript" src="/Scripts/xVal.jquery.validate.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {

                // ---- notification pane
                $("#notify-container").fadeOut(4000);

                // ---- tab bar related code
                var sel;
                $("#nav a").mouseover(function() {
                    if ($(this).data("clicked")) { return; }
                    $(this).children("img").each(function() {
                        this.src = $(this).attr("src").replace(/_off\.gif$/ig, "_on.gif");
                    });
                }).mouseout(function() {
                    if ($(this).data("clicked")) { return; }
                    $(this).children("img").each(function() {
                        this.src = $(this).attr("src").replace(/_on\.gif$/ig, "_off.gif");
                    });
                    //handle clicks
                }).click(function() {
                    if (sel != null) {
                        $("#nav").find("img").each(function() {
                            this.src = this.src.replace(/_clk\.gif$/i, "_off.gif");

                        });
                    }
                    $(this).children("img").each(function() {
                        this.src = $(this).attr("src").replace(/_on.gif$/ig, "_clk.gif");
                    })
                    sel = this;
                });
                //panel pop up code

                //hide panel on load.
                $("#top-panel").hide();

                //toggle when clicked. 
                $("#sub-panel").click(function() {
                    $("#top-panel").slideToggle();
                    var el = $("#shText");
                    var state = $("#shText").html();
                    state = (state == 'Close Panel' ? '<span id="shText">Open Panel</span>' : '<span id="shText">Close Panel</span>'); 
                    el.replaceWith(state);
                });

            });
        </script>


    <script type="text/javascript" language="javascript">
        $(function() { // make this code initialize when DOM loads
            $('#frmXL').submit(function() {
            $('input[type="submit"]', this).replaceWith('<span id="loading"></span>'); // 
            });
        });
    </script>




    </head>

    <body>
    <div class="wrapper">
        <div id="nav">
            <div id="logo"><img src="../../Content/Images/inbox_wrilogo.gif"  width="143" height="28" alt="logo" border="0"  /></div>
            <div id="tab1"><a href="/Support"><img alt="Support" border="0" height="22" name="support" src="/Content/Images/nav_support_off.gif" width="75"></img></a></div>

            <div id="tab2"><a href="/Account"><img alt="Account" border="0" height="22" name="account" src="/Content/Images/nav_acct_off.gif" width="75"></img></a></div>
            <div id="tab3"><a href="/"><img alt="Inbox" border="0" height="22" name="inbox" src="/Content/Images/nav_inbox_off.gif" width="75"></img></a></div>
        </div>



    <form action="/Security/Login?ReturnUrl=%2f" id="frmXL" method="post">
           <div id="loginwrapper">

            <div id="logincontainer">
                <div id="logincontrol">
                   <p>

                    <label for="username" accesskey="u">Email Address</label>
                    <input class="frmInput" id="EmailAddress" name="EmailAddress" type="text" value="" /> 

                   </p>

                    <p>
                    <label for="password" accesskey="p">Password</label>
                    <input class="frmInput" id="Password" name="Password" type="password" />

                    </p>



                    <label for="RememberMe">Remember Me</label>

                    <div id="rememberwrapper">
                     <span class="rememberme"><input id="RememberMe" name="RememberMe" type="checkbox" value="true" /><input name="RememberMe" type="hidden" value="false" /></span> 
                    </div>

                    <p>
                    <input class="frmbtnsubmit" type="submit" value="Login" />
                    </p>
                </div> 

                <span class="homelink">
                <a class="hmlink" href="/Security?Length=4">Back to Homepage</a>

                </span>
            </div>
          </div>
        </form><input name="__RequestVerificationToken" type="hidden" value="DolZ3JoPXziTgPTvWZLqxl/2z16aolj3gjZzHeB2cbs0a+6O17w9bWm3K9XOS/GX" />
        <script type="text/javascript">xVal.AttachValidator(null, {"Fields":[{"FieldName":"EmailAddress","FieldRules":[{"RuleName":"RegEx","RuleParameters":{"Pattern":"^(?:[a-zA-Z0-9_\u0027^&amp;/+-])+(?:\\.(?:[a-zA-Z0-9_\u0027^&amp;/+-])+)*@(?:(?:\\[?(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?))\\.){3}(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\]?)|(?:[a-zA-Z0-9-]+\\.)+(?:[a-zA-Z]){2,}\\.?)$"},"Message":"Email address is invalid."},{"RuleName":"Required","RuleParameters":{},"Message":"This is a required field."},{"RuleName":"RegEx","RuleParameters":{"Pattern":"^(?:[a-zA-Z0-9_\u0027^&amp;/+-])+(?:\\.(?:[a-zA-Z0-9_\u0027^&amp;/+-])+)*@(?:(?:\\[?(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?))\\.){3}(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\]?)|(?:[a-zA-Z0-9-]+\\.)+(?:[a-zA-Z]){2,}\\.?)$"},"Message":"Email address is invalid."},{"RuleName":"Required","RuleParameters":{},"Message":"This is a required field."}]},{"FieldName":"Password","FieldRules":[{"RuleName":"Required","RuleParameters":{},"Message":"This is a required field."},{"RuleName":"Required","RuleParameters":{},"Message":"This is a required field."}]}]})</script>




     </div>


    <!-- RDD: Do not remove this div. This help keep the footer at the bottom of the page -->
     <div class="push"></div> 
    <!-- end -->




    <div id="top-panel">
            <span id="appversion" class="footertext">Inbox Swf Version: 0.0.0.1<br />Web Application Version: 0.0.75.12305</span>
    </div>
    <div id="#footercontent">  
        <div class="footer">
            <div id="footertext">&copy; Copyright 2009 All Rights Reserved</div>

            <div id="sub-panel"><a title="View support panel" href="#" id="toggle"><span id="shText">Open Panel</span></a></div>
         </div>    
    </div>    


    </body>
    </html>

1 个答案:

答案 0 :(得分:1)

无论如何,我认为没有preventDefault()你的提交肯定会被解雇。

$(function() { // make this code initialize when DOM loads
            $('#frmXL').submit(function(e) {
            e.preventDefault();
            $('input[type="submit"]', this).replaceWith('<span id="loading"></span>'); // 
            });
        });