I have an MVC app using xVal. I am trying to hook into the jquery validation to show a "loading" graphic once the form is valid. I cannot seem to find a way to only show the qraphic when jquery has validated the form.
However, it also disables the button when the button is clicked and is NOT validated stopping the user from re-submitting the form one the client side errors are corrected.
Does anyone have any experience doing this.
Thanks
R
Here is the entire page source
<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^&/+-])+(?:\\.(?:[a-zA-Z0-9_\u0027^&/+-])+)*@(?:(?:\\[?(?:(?: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^&/+-])+(?:\\.(?:[a-zA-Z0-9_\u0027^&/+-])+)*@(?:(?:\\[?(?:(?: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">© 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>
Anyway, i think that without preventDefault() your submit will surely be fired.
$(function() { // make this code initialize when DOM loads
$('#frmXL').submit(function(e) {
e.preventDefault();
$('input[type="submit"]', this).replaceWith('<span id="loading"></span>'); //
});
});