Databases
StackOverflow2013
Postsdbo
POjQuery Tabs and validation aren't working together
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Tabs and validation aren't working together
    text
    copied!<p>I'm using jQuery UI tabs and the validation plugin together. I'm validating on the click event of a span acting as a pseudo button. I've only added the validation classes to the form elements visible on the first tab. Also there is one form for the whole page. When I click the button while viewing the first tab, the validation works, however if I'm viewing a different tab, clicking the button causes the code to be executed even though the inputs on the first page aren't valid. Any idea why this is happening. Below is my entire code for the site. Thanks!</p> <pre><code>&lt;!DOCTYPE HTML SYSTEM&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Tournament Designer&lt;/title&gt; &lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/smoothness/jquery-ui.css" type="text/css" media="all" /&gt; &lt;link type="text/css" rel="stylesheet" href="stylesheet.css"&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="jquery.ui.touch-punch.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="code.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="topBanner"&gt;Tournament Designer&lt;/div&gt; &lt;br/&gt; &lt;span class="relative"&gt; &lt;form id="tournamentDesign" method="post" style="display:inline;"&gt; &lt;span id="result" class="tournamentFinalized absolute"&gt;I'm here!&lt;/span&gt; &lt;span id="tournamentDesignTabs"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#tabs-1"&gt;Details&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tabs-2"&gt;Pricing &amp; Promo Codes&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tabs-3"&gt;Divisions&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tabs-4"&gt;Mats&lt;/a&gt;&lt;/li&gt; &lt;span id="createTournament" class="pseudoButton"&gt;Create Tournament&lt;/span&gt; &lt;/ul&gt; &lt;div id="tabs-1"&gt; &lt;p&gt;Enter the details concerning the tournament name, location, date, etc. here.&lt;br/&gt;&lt;em&gt;(* denotes a required field)&lt;/em&gt;&lt;/p&gt; Tournament Name:&lt;input id="tournamentName" name="tournamentName" value="" class="required"/&gt;*&lt;br/&gt; District:&lt;select id="district" name="district" value="" class="required"&gt; &lt;option value="0"&gt;Provo&lt;/option&gt; &lt;option value="1"&gt;SLC&lt;/option&gt; &lt;/select&gt;*&lt;br&gt; Region:&lt;select id="region" name="region" value="" class="required"&gt; &lt;option value="0"&gt;West-USA&lt;/option&gt; &lt;/select&gt;*&lt;br/&gt; Location:&lt;input id="location" name="location" value="" class="required"/&gt;*&lt;br/&gt; Date:&lt;input id="date" name="date" value="" class="required date"/&gt;*&lt;br/&gt; Time:&lt;input id="startTime" name="startTime" value="" class="required"/&gt;*&lt;br/&gt; Logo:&lt;input id="logo" name="logo" value="" class="url"/&gt;*&lt;span id="addPicture" onclick="displayPicture('tournamentLogo',document.getElementById('logo').value)" class="pseudoButton"&gt;Add&lt;/span&gt;&lt;span id="removePicture" onclick="removePicture('tournamentLogo')" class="pseudoButton"&gt;Remove&lt;/span&gt;&lt;br/&gt; &lt;span id="tournamentLogo" class="tournamentLogo"&gt;&lt;/span&gt; &lt;/div&gt; &lt;div id="tabs-2"&gt; &lt;p&gt;Set the pricing structure here. You can add as many structures as you like. To remove a structure select it in the textbox below including the comma and delete it.&lt;/p&gt; # of Divisions:&lt;input id="divisionCount" name="divisionCount" value="" size="3"/&gt; Price:&lt;input id="divisionPrice" name="divisionPrice" value="" size="3"/&gt;&lt;span id="addDivisionPricing" onclick="addDivisionPricing()" class="pseudoButton"&gt;Add&lt;/span&gt;&lt;br/&gt; Pricing Structures:&lt;br/&gt; &lt;span id="divisionPricingInfo" name="divisionPricingInfo" class="divisionPricingInfo"&gt;&lt;/span&gt;&lt;br/&gt; &lt;p&gt;Add Promo Codes Here. A valid Promo Code will contain any character between A-Z and 0-9. When creating a Promo Code you can set it to discount by a percentage or fixed dollar amount. Percentage is selected by default. To remove a promo code follow the same steps as above.&lt;/p&gt; Promo Codes:&lt;/br&gt; Code:&lt;input id="promoCode" name="promoCode" value="" size="3"/&gt; Discount(Percent&lt;input type="radio" name="percentorDollar" value="0" checked&gt;[%] or Dollars&lt;input type="radio" name="percentorDollar" value="1"&gt;[$]): &lt;input id="promoCodeValue" name="promoCodeValue" value="" size="3"/&gt;&lt;span id="addPromoCode" onclick="addPromoCode()" class="pseudoButton"&gt;Add&lt;/span&gt;&lt;br/&gt; &lt;span id="promoCodeInfo" name="promoCodeInfo" class="divisionPricingInfo"&gt;&lt;/span&gt;&lt;br/&gt; &lt;/div&gt; &lt;div id="tabs-3"&gt; &lt;p&gt;Skill &amp; Weight Divisions&lt;/p&gt; Enter Top Level Divisions Here:&lt;input id="tournamentDivisionInput" value="" size=5&gt;&lt;span class="addButton" onclick="addDivisions('tournamentDivisionInfo',document.getElementById('tournamentDivisionInput').value,true)"&gt;+&lt;/span&gt; &lt;span id="tournamentDivisionInfo" class="divisionInfo" style="width:800px;"&gt;&lt;/span&gt; &lt;/div&gt; &lt;div id="tabs-4"&gt; &lt;p&gt;Mat Design&lt;/p&gt; Add Mat Area &lt;input id="matAreaInput" size=3/&gt; With 4 mats. &lt;span class="pseudoButton" onclick="addMatArea(document.getElementById('matAreaInput').value)"&gt;Add&lt;/span&gt;&lt;br/&gt; &lt;span class="divisionPricingInfo" id="matAreaInfo"&gt;&lt;/span&gt; &lt;/div&gt; &lt;/span&gt; &lt;/form&gt; &lt;/span&gt; &lt;script type="text/javascript"&gt; $("#tournamentDesignTabs").tabs(); $("#tournamentDesign").validate(); $("#createTournament").click(function(){ if($("#tournamentDesign").valid()){ $.post( "createTournament.php", {tournamentName: $("#tournamentName").val(), district: $("#district").val(), region: $("#region").val(), location: $("#location").val(), date: $("#date").val(), time: $("#time").val(), logo: $("#logo").val()}, function(responseText){ $("#result").html(responseText); }, "html" ) $("#result").css('z-index',1000); $("#result").css('background-color','#000000'); $("#result").css({ opacity: 0.95 }); $("#result").css('color','#FFFFFF'); } } ); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload