Bug Tracker

Opened 7 years ago

Closed 7 years ago

#12327 closed bug (invalid)

Using "cancel" class doesn't skip validation in MVC 3.0- it cancels the form submission

Reported by: dlwennblom Owned by:
Priority: undecided Milestone: None
Component: unfiled Version: 1.8.0
Keywords: Cc:
Blocked by: Blocking:

Description

I'm new to jQuery, and somewhat with MVC 3.0, but I've tried everything I can think of to skip the jQuery validation without sucess. I want the jQuery validation to occur using my Save, Add, and Done buttons and bypass the jQuery validation using my Undo, Remove and Cancel buttons. Currently, Cancel is the only button with the "cancel" class specified.

Below is a screen shot of what happens after I click "Cancel": - don't know how to attach an image...

Here's my HTML:

<!DOCTYPE html>
<html>
<head>
	<title>Create/Edit A User</title>
	<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
	<script src="/Scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
</head>
<body>
	<div class="page">
		<div id="header">
			<div id="breadcrumbs">
	<div class="float">
		<ul class="siteMap">
				<li><a href="/Home/Index" title="Home">Home</a>&nbsp;&gt;&nbsp;</li> 
				<li><a href="/Security/Index" title="Security">Security</a>&nbsp;&gt;&nbsp;</li> 
				<li><span>Edit A User</span></li> 
		</ul>
		
	</div>
			</div>
			<div id="logindisplay">
				    Welcome <strong>Daniel Wennblom</strong>!
    [ <a href="/Security/LogOff">Log Off</a> ]

			</div>
		</div>
		<div id="main">
			<h2>Create/Edit A User</h2>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<form action="/Security/EditUser" method="post"><div class="validation-summary-errors"><ul><li style="display:none"></li>
</ul></div>	<fieldset>
		<legend>User Information</legend>
		<div class="float gutter">
			<table>
				<tr>
					<td>
						<input data-val="true" data-val-required="The UserID field is required." id="UserID" name="UserID" type="hidden" value="00000000-0000-0000-0000-000000000000" />
						<input id="OriginalUserName" name="OriginalUserName" type="hidden" value="" />
					</td>
				</tr>
				<tr>
					<td>
						<div class="editor-label">
							<label for="UserName">User name</label>
						</div>
					</td>
					<td>
						<div class="editor-field">
							<input class="input-validation-error text-box single-line" data-val="true" data-val-length="The field User name must be a string with a maximum length of 100." data-val-length-max="100" data-val-required="The User name field is required." id="UserName" name="UserName" style="width: 250px;" type="text" value="" />

							<span class="field-validation-error" data-valmsg-for="UserName" data-valmsg-replace="true">The User name field is required.</span>
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<div class="editor-label">
							<label for="EmailAddress">Email address</label>
						</div>
					</td>
					<td>
						<div class="editor-field">
							<input class="input-validation-error text-box single-line" data-val="true" data-val-regex="The &amp;#39;Email Address&amp;#39; is not valid." data-val-regex-pattern="^(?&lt;user>[^@]+)@(?&lt;host>.+)$" data-val-required="The Email address field is required." id="EmailAddress" name="EmailAddress" type="text" value="" />

							<span class="field-validation-error" data-valmsg-for="EmailAddress" data-valmsg-replace="true">The Email address field is required.</span>
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<div class="editor-label">
							<label for="Password">Password</label>
						</div>
					</td>
					<td>
						<div class="editor-field password">
							<input class="text-box single-line password" id="Password" name="Password" type="password" value="" />

							<span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span>
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<div class="editor-label">
							<label for="ConfirmPassword">Confirm new password</label>
						</div>
					</td>
					<td>
						<div class="editor-field password">
							<input class="text-box single-line password" data-val="true" data-val-equalto="The new password and confirmation password do not match." data-val-equalto-other="*.Password" id="ConfirmPassword" name="ConfirmPassword" type="password" value="" />

							<span class="field-validation-valid" data-valmsg-for="ConfirmPassword" data-valmsg-replace="true"></span>
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<div class="editor-label">
							<label for="IsLockedOut">Locked Out?</label>
						</div>
					</td>
					<td>
						<div class="editor-field">
							<input class="check-box" data-val="true" data-val-required="The Locked Out? field is required." id="IsLockedOut" name="IsLockedOut" type="checkbox" value="true" /><input name="IsLockedOut" type="hidden" value="false" />

							<span class="field-validation-valid" data-valmsg-for="IsLockedOut" data-valmsg-replace="true"></span>
						</div>
					</td>
				</tr>
			</table>
		</div>
	</fieldset>
	<fieldset>
		<legend>Allowed Roles:</legend>
		<div>
<input data-val="true" data-val-required="The Allowed field is required." id="AllowedRoles_0__Allowed" name="AllowedRoles[0].Allowed" type="checkbox" value="true" /><input name="AllowedRoles[0].Allowed" type="hidden" value="false" /><label for="Security">Security</label><input id="AllowedRoles_0__RoleName" name="AllowedRoles[0].RoleName" type="hidden" value="Security" />				<br />
		</div>
	</fieldset>
	<br />
	<div class="center">
		<button class="buttons" name="saveButton" value="Save" type="submit" title="Save changes to the database.">
			<div class="clear float">
				<img class="buttonimage" src="../../Content/Images/Save.png" alt="Save" />&nbsp;</div>
			<div class="buttontext">Save</div>
		</button>
		<button class="buttons" name="undoButton" value="Undo" type="submit" title="Undo changes since the last (Save).">
			<div class="clear float">
				<img class="buttonimage" src="../../Content/Images/Undo.png" alt="Undo" />&nbsp;</div>
			<div class="buttontext">Undo</div>
		</button>
		<button class="buttons" name="addButton" value="Add" type="submit" title="Add new record to the database.">
			<div class="clear float">
				<img class="buttonimage" src="../../Content/Images/add.png" alt="Add" />&nbsp;</div>
			<div class="buttontext">Add</div>
		</button>
		<button class="buttons" name="removeButton" value="Remove" type="submit" title="Remove the current record from the database.">
			<div class="clear float">
				<img class="buttonimage" src="../../Content/Images/remove.png" alt="Remove" />&nbsp;</div>
			<div class="buttontext">Remove</div>
		</button>
		<button class="buttons" name="doneButton" value="Done" type="submit" title="Done- sames as (Save), then (Cancel).">
			<div class="clear float">
				<img class="buttonimage" src="../../Content/Images/Done.png" alt="Done" />&nbsp;</div>
			<div class="buttontext">Done</div>
		</button>
		<button class="buttons cancel" id="cancel" name="cancelButton" value="Cancel" type="submit" title="Cancel (go back to the previous screen).">
			<div class="clear float">
				<img class="buttonimage" src="../../Content/Images/cancel.png" alt="Cancel" />&nbsp;</div>
			<div class="buttontext">Cancel</div>
		</button>
	</div>
</form><div>
	<br />
	<a href="/Security/ListUsers">Back To List</a>
</div>

		</div>
		<div id="footer">
		</div>
	</div>
	<div class="below-footer center">
		<a href="/Home/About">About</a> | 
		en-US
	</div>
</body>
</html>

Any help is greatly appreciated.

Change History (2)

comment:2 Changed 7 years ago by dmethvin

Resolution: invalid
Status: newclosed

Ask on the forum, this isn't a bug report (at least not OUR bug).

Note: See TracTickets for help on using tickets.