Frage

Ich habe einen MVC-app xVal. Ich versuche, in die Jquery Validierung einzuhaken eine „Laden“ Grafik zu zeigen, sobald das Formular gültig ist. Ich kann nicht scheinen, einen Weg zu finden, um nur die qraphic zu zeigen, wenn Jquery das Formular bestätigt hat.

Es ist jedoch deaktiviert auch die Taste los, wenn die Schaltfläche geklickt wird und der Benutzer wieder die Einreichung nicht zu stoppen validiert Form eine der Client-Seite Fehler korrigiert werden.

hat jemand Erfahrung dies zu tun.

Danke

R

Hier ist die gesamte Seite Quelle

<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>
War es hilfreich?

Lösung

Wie auch immer, ich denke, dass es ohne prevent () Sie sicher gefeuert werden vorlegen werden.

$(function() { // make this code initialize when DOM loads
            $('#frmXL').submit(function(e) {
            e.preventDefault();
            $('input[type="submit"]', this).replaceWith('<span id="loading"></span>'); // 
            });
        });
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top