Home/ Questions/Q 8097801
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T21:52:39+00:00

$(#tournamentDesignTabs).tabs(); $(#tournamentDesign).validate(); $(#createTournament).click(function(){ if($(#tournamentDesign).validate()){ $.post( createTournament.php, {tournamentName: $(#tournamentName).val(), district: $(#district).val(), region: $(#region).val(), location: $(#location).val(),

  • 0
$("#tournamentDesignTabs").tabs();
$("#tournamentDesign").validate();
$("#createTournament").click(function(){
    if($("#tournamentDesign").validate()){
    $.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"  )
    } else {
        alert("oh no");
    }
    }
);

So above is the script I’m using to validate some form information then enter it into a database. The problem I’m encountering is that the validate function doesn’t seem to do anything when attached to the span’s click event handler. I also noticed that onfocusout doesn’t seem to be behaving properly either. Any suggestions or ideas as to what I’m doing wrong. I know I have the plug in included correctly because the validate function still works on when I submit the form. I’d prefer ajax though. Thanks!

EDIT: As one answer said below, they think having the html would help so here is the page. Every last bit of code and content. I know it’s dirty and messy, but I’m learning and will clean it up soon. Anyways here it is:

<!DOCTYPE HTML SYSTEM>
<html>
<head>
<title>Tournament Designer</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/smoothness/jquery-ui.css" type="text/css" media="all" />
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script type="text/javascript" src="code.js"></script>
</head>
<body>
<div class="topBanner">Tournament Designer</div>
<br/>
<form id="tournamentDesign" method="post" style="display:inline;">
<span id="tournamentDesignTabs">
    <ul>
        <li><a href="#tabs-1">Details</a></li>
        <li><a href="#tabs-2">Pricing & Promo Codes</a></li>
        <li><a href="#tabs-3">Divisions</a></li>
        <li><a href="#tabs-4">Mats</a></li>
        <span id="createTournament" class="pseudoButton">Create Tournament</span>
        <input type="submit" value="submit"/>
    </ul>
    <div id="tabs-1">
        <p>Enter the details concerning the tournament name, location, date, etc. here.<br/><em>(* denotes a required field)</em></p>
        Tournament Name:<input id="tournamentName" name="tournamentName" value="" class="required"/>*<br/>
        District:<select id="district" name="district" value="" class="required">
                  <option value="0">Provo</option>
                  <option value="1">SLC</option>
                </select>*<br>
        Region:<select id="region" name="region" value="" class="required">
                  <option value="0">West-USA</option>
                </select>*<br/>
        Location:<input id="location" name="location" value="" class="required"/>*<br/>
        Date:<input id="date" name="date" value="" class="required date"/>*<br/>
        Time:<input id="startTime" name="startTime" value="" class="required"/>*<br/>
        Logo:<input id="logo" name="logo" value="" class="url"/>*<span id="addPicture" onclick="displayPicture('tournamentLogo',document.getElementById('logo').value)" class="pseudoButton">Add</span><span id="removePicture" onclick="removePicture('tournamentLogo')" class="pseudoButton">Remove</span><br/>
        <span id="tournamentLogo" class="tournamentLogo"></span>
    </div>
    <div id="tabs-2">
        <p>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.</p>
        # of Divisions:<input id="divisionCount" name="divisionCount" value="" size="3"/> Price:<input id="divisionPrice" name="divisionPrice" value="" size="3"/><span id="addDivisionPricing" onclick="addDivisionPricing()" class="pseudoButton">Add</span><br/>
        Pricing Structures:<br/>
        <span id="divisionPricingInfo" name="divisionPricingInfo" class="divisionPricingInfo"></span><br/>
        <p>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.</p>
        Promo Codes:</br>
        Code:<input id="promoCode" name="promoCode" value="" size="3"/> Discount(Percent<input type="radio" name="percentorDollar" value="0" checked>[%] or Dollars<input type="radio" name="percentorDollar" value="1">[$]): <input id="promoCodeValue" name="promoCodeValue" value="" size="3"/><span id="addPromoCode" onclick="addPromoCode()" class="pseudoButton">Add</span><br/>
        <span id="promoCodeInfo" name="promoCodeInfo" class="divisionPricingInfo"></span><br/>
    </div>
    <div id="tabs-3">
        <p>Skill & Weight Divisions</p>
        Enter Top Level Divisions Here:<input id="tournamentDivisionInput" value="" size=5><span class="addButton" onclick="addDivisions('tournamentDivisionInfo',document.getElementById('tournamentDivisionInput').value,true)">+</span>
        <span id="tournamentDivisionInfo" class="divisionInfo" style="width:800px;"></span>
    </div>
    <div id="tabs-4">
        <p>Mat Design</p>
        Add Mat Area <input id="matAreaInput" size=3/> With 4 mats. <span class="pseudoButton" onclick="addMatArea(document.getElementById('matAreaInput').value)">Add</span><br/>
        <span class="divisionPricingInfo" id="matAreaInfo"></span>
    </div>
</span>
</form>
<span id="result" class="tournamentInfo">I'm here!<span>
<script type="text/javascript">
$("#tournamentDesignTabs").tabs();
//$("#tournamentDesign").validate();
$("#createTournament").click(function(){
    if($("#tournamentDesign").validate()){
    $.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"  )
    } else {
        alert("oh no");
    }
    }
);
</script>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    .validate() is what initializes the Validation plugin on your form.

    .valid() returns true or false depending on if your form is presently valid.

    So you’d use .valid(), not .validate(), within an if statement to test if form is valid…

    $("#tournamentDesign").validate();
$("#createTournament").click(function(){
    if($("#tournamentDesign").valid()){
    ...

    See docs.jquery.com/Plugins/Validation/valid for more info.

    • 0