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" / ></form> </div> </div> <!-- PageHeaderUserControl END --> <div class="colmask threecol"> <div class="colmid"> <div class="colleft"> <div class="col1"> <form action="/Ad/Post/Apartment" class="ad_form" enctype="multipart/ form-data" id="postAdForm" method="post"> <h1>Post an Advertisement for Apartment</h1> <table cellspacing="5"> <tr><td colspan="2"><h2>Advertisement Info</h2></td></tr> <tr> <td style="width:100px"><label for="adTitle">* Title :</label></ td> <td><input class="very_long_field" id="adTitle" name="adTitle" title="Enter ad title" type="text" value="" /> <div class="ad_posting_instruction">Enter a descriptive title that follows the <a href="#">advertising guidelines</a>.</div> </td> </tr> <tr> <td><label for="adTypeId">* Classification:</label></td> <td><select class="short_field" id="adTypeId" name="adTypeId"><option value="1">For Sale</option> <option value="2">For Rent</option> <option value="3">Rent-To-Own</option> <option value="4">Service</option> <option value="5">Wanted</option> <option value="6">For Swap</option> <option value="7">For Charity</option> </select> <div class="ad_posting_instruction">Select the type of the classified ad you are posting.</div> </td> </tr> <tr> <td style="width:100px"><label for="price">* Price :</label></td> <td><input class="short_field" id="price" name="price" title="Enter the Price" type="text" value="" /> <div class="ad_posting_instruction">Indicate the price in Philippine Pesos.</div> </td> </tr> <tr> <td><label for="expireDays">* Expiration:</label></td> <td><select class="short_field" id="expireDays" name="expireDays"><option value="15">15 Days</option> <option value="30">30 Days</option> <option value="45">45 Days</option> <option value="60">60 Days</option> <option value="90">90 Days</option> </select> <div class="ad_posting_instruction">Select when this advertisement expires.</div> </td> </tr> <tr> <td><label for="autoRepostDays">* Auto-Repost:</label></td> <td><select class="short_field" id="autoRepostDays" name="autoRepostDays"><option value="0"></option> <option value="15">15 Days</option> <option value="30">30 Days</option> <option value="45">45 Days</option> <option value="60">60 Days</option> <option value="90">90 Days</option> </select> <div class="ad_posting_instruction">Select the number of days this ad will be automatically extended after it expires. <br />Auto-reposting will only be performed if you login within 7 days after your ad expires.</div> </td> </tr> <tr> <td><label for="description">* Description:</label></td><td> <textarea cols="60" id="description" name="description" rows="20"> </textarea> <div class="ad_posting_instruction">Enter a more detailed description for your advertisement.<br /> You can edit in full-screen mode by clicking on the button at the editor's upper-right hand corner.<br /> Please ensure that your description follows the <a href="#">advertising guidelines</a>.</div> </td> </tr> <tr> <td><label for="location">Location:</label></td> <td><input class="very_long_field" id="location" name="location" type="text" value="" /> <div class="ad_posting_instruction">Please enter the city and province where the item or service you are advertising is located.</ div> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("#location").autocomplete('/Other/Locations', { delay:10, minChars:0, max:10, autoFill:true, mustMatch:false, matchContains:true, selectFirst:false, scrollHeight:220})}); </script> </td> </tr> <tr> <td><label for="image1">Images:</label></td> <td><div style="padding-top:5px"><a href="javascript:''" id="showFileUploadDialog" class="jqModal">Upload Images</a></div> <div class="ad_posting_instruction">Upload the images that will be shown with your advertisement.<br /> Only GIF, JPG, and PNG files are allowed and each file should be smaller than 2MB in size.<br /> Please ensure that the images follow the <a href="#">advertising guidelines</a>. </div> <span id="ad_thumbnails"></span> </td> </tr> <tr><td colspan="2"><h2>Contact Information</h2></td></tr> <tr> <td><label for="lookFor">Contact Person:</label></td> <td><input class="mid_field" id="lookFor" maxlength="50" name="lookFor" type="text" value="" /> <div class="ad_posting_instruction">Enter the name of the person to contact regarding this ad.</div> </td> </tr> <tr> <td><label for="contactNumber">Contact Number:</label></td> <td><input class="mid_field" id="contactNumber" maxlength="50" name="contactNumber" type="text" value="" /> <div class="ad_posting_instruction">Enter the land line or mobile phone of the person to contact regarding this ad.</div> </td> </tr> <tr> <td><label for="email">Email:</label></td> <td><input class="long_field" id="email" maxlength="100" name="email" type="text" value="" /> <div class="ad_posting_instruction">Enter the email address of the person to contact regarding this ad.</div> </td> </tr> <tr> <td><label for="website">Website:</label></td> <td><input class="long_field" id="website" maxlength="100" name="website" type="text" value="" /> <div class="ad_posting_instruction">Enter the website URL where you want interested parties to go to for more details.</div> </td> </tr> <tr> <td><label for="website">Address:</label></td> <td><input class="very_long_field" id="address" maxlength="200" name="address" type="text" value="" /> <div class="ad_posting_instruction">Enter your mailing address.</ div> </td> </tr> <tr> <td> </td> <td><br /> <strong>NOTE:</strong> Fields marked with an asterisk (*) are required and should be filled up.<br /><br /> <label for="saveAsDraft" style="width:500px;text- align:left"><input id="saveAsDraft" name="saveAsDraft" type="checkbox" value="true" /><input name="saveAsDraft" type="hidden" value="false" / > Save As Draft - your ad will be published only when you mark it as finished.</label><br /> <input type="submit" value="Submit" class="button" /> <input id="adCategoryId" name="adCategoryId" type="hidden" value="1001" /> <input id="postedBy" name="postedBy" type="hidden" value="tester" /> <input id="imageFiles" name="imageFiles" type="hidden" value="" /> </td> </tr> </table> </form> <div class="jqmWindow" id="fileUploadDialog"> <div style="text-align:right;width:100%"><a href="#" id="closeFileUploadDialog" class="jqmClose" onclick="setImageFiles ();removeErrorImages();return false;">Close</a></div> <div class="ad_posting_instruction">Upload the images that will be shown with your advertisement.<br /> Only GIF, JPG, and PNG files are allowed and each file should be smaller than 2MB in size.<br /> We highly recommend that you use images that have a ratio of 4:3 (e.g. 120x90, 800x600).<br /> Please ensure that the images follow the <a href="#">advertising guidelines</a>. </div> <form> <div style="padding-top:10px"> <div style="display: inline; border: solid 1px #7FAAFF; background- color: #C5D9FF; padding: 2px;"> <span id="spanButtonPlaceholder"></span> </div> </div> </form> <div id="divFileProgressContainer" style="height:75px;"></div> <div id="thumbnails"></div> </div> <a id="showViewImageDialog" href="#" style="display:none;"></a> <div class="jqmWindow2" id="viewImageDialog"> <div style="text-align:right;width:100%"><a href="#" id="closeViewImageDialog" class="jqmClose">Close</a></div> <div style="padding-top:10px;padding-bottom:10px;text- align:center"> <div id="expandedImage"></div> <div id="expandedImageCaption"></div> </div> </div> <div class="jqmWindow3" id="editCaptionDialog"> <div style="text-align:right;width:100%"><a href="#" id="closeEditCaptionDialog" class="jqmClose">Close</a></div> <div style="padding-top:10px;padding-bottom:10px;text- align:center"> <div id="captionImage"></div> <div style="padding-top:10px;padding-bottom:10px"> <label for="photoCaption">Caption:</label> <input type="text" id="photoCaption" name="photoCaption" size="40" maxlength="60" /><br / > <a href="#" onclick="updateCaption();return false;">Update Caption</a> </div> <div id="resultCaption"></div> </div> </div> </div> <div class="col2"> </div> <div class="col3"> </div> </div> </div> <div id="footer"> <span class="copyright">Copyright © 2008-2009 Pilipinoy.com. All rights reserved.</span> <a href="#">About Us</a> | <a href="#">Contact Us</a> | <a href="#">Site Map</a> | <a href="#">Privacy Policy</a> | <a href="#">Advertise</a> | <a href="#">Ad Guidelines</a> | <a href="#">Suggestion Box</a> | <a href="#">News</a> </div> </div> </div> </body> </html>
