[jQuery] [validate]Submit button needing to be clicked twice.
I'm using the validation plugin from "http://bassistance.de/jquery-
plugins/jquery-plugin-validation/" and I'm encountering a problem when
submitting CORRECT data.
When the data being inputted is all correct, I end up having to click
the submit button TWICE before the data is sent to the server. What
could be causing this?
Here's my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" /><title>
Post a classified advertisement for Apartment in the Philippines.
</title>
<link href="/Styles/pilipinoy.css" rel="stylesheet" type="text/
css" />
<script src="/Scripts/MicrosoftAjax.debug.js" type="text/
javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.debug.js" type="text/
javascript"></script>
<script src="/Scripts/jquery-1.3.2.min.js" type="text/
javascript"></script>
<script src="/Scripts/scroller.js" type="text/javascript"></
script>
<style type="text/css">
div.flash {
width: 375px;
margin: 10px 5px;
border-color: #D9E4FF;
-moz-border-radius-topleft : 5px;
-webkit-border-top-left-radius : 5px;
-moz-border-radius-topright : 5px;
-webkit-border-top-right-radius : 5px;
-moz-border-radius-bottomleft : 5px;
-webkit-border-bottom-left-radius : 5px;
-moz-border-radius-bottomright : 5px;
-webkit-border-bottom-right-radius : 5px;
}
#btnSubmit { margin: 0 0 0 155px ; }
.progressWrapper {
width: 357px;
overflow: hidden;
}
.progressContainer {
margin: 5px;
padding: 4px;
border: solid 1px #E8E8E8;
background-color: #F7F7F7;
overflow: hidden;
}
/* Message */
.message {
margin: 1em 0;
padding: 10px 20px;
border: solid 1px #FFDD99;
background-color: #FFFFCC;
overflow: hidden;
}
/* Error */
.red {
border: solid 1px #B50000;
background-color: #FFEBEB;
}
/* Current */
.green {
border: solid 1px #DDF0DD;
background-color: #EBFFEB;
}
/* Complete */
.blue {
border: solid 1px #CEE2F2;
background-color: #F0F5FF;
}
.progressName {
font-size: 8pt;
font-weight: 700;
color: #555;
width: 323px;
height: 14px;
text-align: left;
white-space: nowrap;
overflow: hidden;
}
.progressBarInProgress,
.progressBarComplete,
.progressBarError {
font-size: 0;
width: 0%;
height: 2px;
background-color: blue;
margin-top: 2px;
}
.progressBarComplete {
width: 100%;
background-color: green;
visibility: hidden;
}
.progressBarError {
width: 100%;
background-color: red;
visibility: hidden;
}
.progressBarStatus {
margin-top: 2px;
width: 337px;
font-size: 7pt;
font-family: Arial;
text-align: left;
white-space: nowrap;
}
a.progressCancel {
font-size: 0;
display: block;
height: 14px;
width: 14px;
background-image: url(/Content/images/cancelbutton.gif);
background-repeat: no-repeat;
background-position: -14px 0px;
float: right;
}
a.progressCancel:hover {
background-position: 0px 0px;
}
.swfupload {
vertical-align: top;
}
</style>
<link href="/Styles/jquery.autocomplete.css" rel="stylesheet"
type="text/css" />
<link href="/Styles/jqmodal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/Scripts/jquery.autocomplete.js"></
script>
<script type="text/javascript" src="/Scripts/jquery.metadata.js"></
script>
<script type="text/javascript" src="/Scripts/
jquery.validate.pack.js"></script>
<script type="text/javascript" src="/Scripts/tiny_mce/tiny_mce.js"></
script>
<script type="text/javascript" src="/Scripts/jqModal.js"></script>
<script type="text/javascript" src="/Scripts/swfupload.js"></script>
<script type="text/javascript" src="/Other/FileUploadHandler"></
script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode: "exact",
elements: "description",
theme: "advanced",
skin: "o2k7",
plugins:
"safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups",
// Theme options
theme_advanced_buttons1:
"insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,|,insertdate,inserttime,preview,|,fullscreen",
theme_advanced_buttons2:
"tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,advhr,|,print,|,ltr,rtl",
theme_advanced_buttons3:
"cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,|,forecolor,backcolor",
theme_advanced_buttons4:
"bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: false,
// Example content CSS (should be your site CSS)
content_css: "/Styles/editor.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url: "/Content/lists/template_list.js",
external_link_list_url: "/Content/lists/link_list.js",
external_image_list_url: "/Content/lists/image_list.js",
media_external_list_url: "/Content/lists/media_list.js",
// Replace values for the template plugin
template_replace_values: {
username: "tester",
staffid: "tester"
},
// update validation status on change
onchange_callback: function(editor) {
tinyMCE.triggerSave();
$("#" + editor.id).valid();
}
});
jQuery.validator.addMethod("toomanycaps", function(value, element) {
var ucase = value.replace(/[^A-Z]/g, "").length;
var lcase = value.replace(/[^a-z]/g, "").length;
return this.optional(element) || (ucase <= lcase);
}, "Too many capital letters.");
jQuery.validator.addMethod("toomanypunc", function(value, element) {
var puncs = value.replace(/[0-9a-zA-Z]/g, "").length;
var nonpuncs = value.replace(/[^0-9a-zA-Z]/g, "").length;
return this.optional(element) || (puncs <= nonpuncs);
}, "Too many space or punctuation characters.");
$().ready(function() {
// validate signup form on keyup and submit
$("#postAdForm").validate({
rules: {
adTitle: {
required: true,
maxlength: 80,
toomanycaps: true,
toomanypunc: true
},
description: {
required: true
},
price: {
required: true,
maxlength: 20,
number: true
},
location: {
required: false,
maxlength: 200
},
lookFor: {
required: false,
maxlength: 50
},
contactNumber: {
required: false,
maxlength: 50
},
email: {
required: false,
email: true,
maxlength: 100
},
website: {
required: false,
url: true,
maxlength: 100
},
address: {
required: false,
maxlength: 200
}
},
messages: {
adTitle: {
required: "Title is required.",
maxlength: "Should be from 1 to 80 characters.",
toomanycaps: "Too many capitalized letters.",
toomanypunc: "Too many space or punctuation
characters."
},
description: "Description is required.",
price: {
required: "Price is required.",
maxlength: "Should not exceed 20 characters.",
number: "Price should be a number."
},
location: "Should not exceed 200 characters.",
lookFor: "Should not exceed 50 characters.",
contactNumber: "Should not exceed 50 characters.",
email: "Invalid email address.",
website: "Invalid website URL."
}
});
$('#fileUploadDialog').jqm({modal:true,
trigger:'#showFileUploadDialog',
onHide: function(h) {
h.o.remove(); // remove overlay
h.w.fadeOut(888); // hide window
},
overlay: 0}).jqmAddClose('#closeFileUploadDialog');
$('#viewImageDialog').jqm({modal:true, overlay: 10, trigger:
false}).jqmAddClose('#closeViewImageDialog');
$('#editCaptionDialog').jqm({modal:true, overlay: 10, trigger:
false}).jqmAddClose('#closeEditCaptionDialog');
});
var swfu;
window.onload = function() {
swfu = new SWFUpload({
// Backend Settings
upload_url: "/Other/UploadPhoto",
post_params: {"username": "tester"},
// File Upload Settings
file_size_limit : "2 MB",
file_types : "*.jpg;*.png;*.gif",
file_types_description : "JPG, GIF or PNG Images",
file_upload_limit : "20",
// Event Handler Settings - these functions as defined in Other/
FileUploadHandler
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete,
// Button Settings
button_image_url : "/Content/images/
SmallSpyGlassWithTransparency_17x18.png",
button_placeholder_id : "spanButtonPlaceholder",
button_width: 180,
button_height: 18,
button_text : '<span class="button">Select Images <span
class="buttonSmall">(2 MB Max)</span></span>',
button_text_style : '.button { font-family: Helvetica, Arial, sans-
serif; font-size: 12pt; } .buttonSmall { font-size: 10pt; }',
button_text_top_padding: 0,
button_text_left_padding: 18,
button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
button_cursor: SWFUpload.CURSOR.HAND,
// Flash Settings
flash_url : "/Content/Flash/swfupload.swf",
custom_settings : {
upload_target : "divFileProgressContainer"
},
// Debug Settings
debug: false
});
};
function setImageFiles() {
$('#imageFiles').get(0).value = '';
$('#ad_thumbnails img').each(
function(i) {
var src = this.src;
var val = ((i == 0) ? '' : $('#imageFiles').get(0).value +
'|') + src.substr(src.lastIndexOf('/') + 1);
$('#imageFiles').get(0).value = val;
}
);
}
</script>
</head>
<body>
<div id="main">
<!-- PageHeaderUserControl BEGIN -->
<div id="header">
<div class="header_ads">
<div class="header_ad first_header_ad">
<!-- WebAdUserControl BEGIN -->
<a href="/PaidAdvertisements/Home Micro-Bar #1" title="Advertise at
pilipinoy.com"><img src="/Content/88x31.gif" alt="Advertise at
pilipinoy.com" width="88" height="31" /></a>
<!-- WebAdUserControl END -->
</div>
<div class="header_ad">
<!-- WebAdUserControl BEGIN -->
<a href="/PaidAdvertisements/Home Micro-Bar #2" title="Advertise at
pilipinoy.com"><img src="/Content/88x31.gif" alt="Advertise at
pilipinoy.com" width="88" height="31" /></a>
<!-- WebAdUserControl END -->
</div>
<div class="header_ad">
<!-- WebAdUserControl BEGIN -->
<a href="/PaidAdvertisements/Home Micro-Bar #3" title="Advertise at
pilipinoy.com"><img src="/Content/88x31.gif" alt="Advertise at
pilipinoy.com" width="88" height="31" /></a>
<!-- WebAdUserControl END -->
</div>
<div class="header_ad">
<!-- WebAdUserControl BEGIN -->
<a href="/PaidAdvertisements/Home Micro-Bar #4" title="Advertise at
pilipinoy.com"><img src="/Content/88x31.gif" alt="Advertise at
pilipinoy.com" width="88" height="31" /></a>
<!-- WebAdUserControl END -->
</div>
<div class="header_ad">
<!-- WebAdUserControl BEGIN -->
<a href="/PaidAdvertisements/Home Micro-Bar #5" title="Advertise at
pilipinoy.com"><img src="/Content/88x31.gif" alt="Advertise at
pilipinoy.com" width="88" height="31" /></a>
<!-- WebAdUserControl END -->
</div>
<div class="header_ad">
<!-- WebAdUserControl BEGIN -->
<a href="/PaidAdvertisements/Home Micro-Bar #6" title="Advertise at
pilipinoy.com"><img src="/Content/88x31.gif" alt="Advertise at
pilipinoy.com" width="88" height="31" /></a>
<!-- WebAdUserControl END -->
</div>
<div class="header_ad">
<!-- WebAdUserControl BEGIN -->
<a href="/PaidAdvertisements/Home Micro-Bar #7" title="Advertise at
pilipinoy.com"><img src="/Content/88x31.gif" alt="Advertise at
pilipinoy.com" width="88" height="31" /></a>
<!-- WebAdUserControl END -->
</div>
<div class="header_ad">
<!-- WebAdUserControl BEGIN -->
<a href="/PaidAdvertisements/Home Micro-Bar #8" title="Advertise at
pilipinoy.com"><img src="/Content/88x31.gif" alt="Advertise at
pilipinoy.com" width="88" height="31" /></a>
<!-- WebAdUserControl END -->
</div>
<div class="header_ad">
<!-- WebAdUserControl BEGIN -->
<a href="/PaidAdvertisements/Home Micro-Bar #9" title="Advertise at
pilipinoy.com"><img src="/Content/88x31.gif" alt="Advertise at
pilipinoy.com" width="88" height="31" /></a>
<!-- WebAdUserControl END -->
</div>
<div class="header_ad">
<!-- WebAdUserControl BEGIN -->
<a href="/PaidAdvertisements/Home Micro-Bar #10" title="Advertise at
pilipinoy.com"><img src="/Content/88x31.gif" alt="Advertise at
pilipinoy.com" width="88" height="31" /></a>
<!-- WebAdUserControl END -->
</div>
<div class="header_ad last_header_ad">
<!-- WebAdUserControl BEGIN -->
<a href="/PaidAdvertisements/Home Micro-Bar #11" title="Advertise at
pilipinoy.com"><img src="/Content/88x31.gif" alt="Advertise at
pilipinoy.com" width="88" height="31" /></a>
<!-- WebAdUserControl END -->
</div>
</div>
<div id="titlebar">
<div id="site_description">
<span id="home"><a href="/">Pilipinoy.com</a></span> now serving
1,000+ Filipinos from all over the Philippines. <a href="/
Register">Join the pinoy network today.</a>
</div>
<div id="addthis">
<!-- AddThis Button BEGIN -->
<script type="text/javascript">var addthis_pub = "pilipinoy";</
script>
<a href="http://www.addthis.com/bookmark.php?v=20" onmouseover="return
addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close
()" onclick="return addthis_sendto()"><img src="http://s7.addthis.com/
static/btn/lg-bookmark-en.gif" width="125" height="16" alt="Bookmark
and Share" style="border:0"/></a><script type="text/javascript"
src="http://s7.addthis.com/js/200/addthis_widget.js"></script>
<!-- AddThis Button END -->
</div>
</div>
<div id="toolbar">
<form id="search_form" action="#" method="get">
<label for="search_text">Search</label> <input type="text"
name="search_text" id="search_text" /> <input type="submit"
id="submit_search" value="go" />
</form>
<strong>Willeus Acuña [tester]</strong>, welcome to
Pilipinoy.com! <form action="/Account/ControlPanel" class="form_bar"
id="cpanel_form" method="get">
<input type="submit" name="cpanel" id="cpanel" value="control
panel" /></form><form action="/Account/Logout" class="form_bar"
id="logout_form" method="get">
<input type="submit" name="logout" id="logout" value="logout" /