Disable submit button with xVal MVC
I have an MVC application using xVal. I am trying to hook into jquery validation to show the "loading" graphics as soon as the form is valid. I cannot find a way to show only qraphic when jquery has submitted the form.
However, it also disables the button when the button is clicked and is NOT validated to prevent the user from submitting the client-side corrected form.
Does anyone have any experience with this.
thank
R
Here is the whole 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>
+2
source to share
1 answer