jQuery验证插件赢得'；在的click事件处理程序中时无法验证_Jquery_Jquery Validate

jQuery验证插件赢得'；在的click事件处理程序中时无法验证

jquery

jQuery验证插件赢得'；在的click事件处理程序中时无法验证,jquery,jquery-validate,Jquery,Jquery Validate,上面是我用来验证一些表单信息然后将其输入数据库的脚本。我遇到的问题是，当连接到span的click事件处理程序时，validate函数似乎没有做任何事情。我还注意到onfocusout的行为似乎也不正常。任何关于我做错了什么的建议或想法。我知道我正确地包含了插件，因为在我提交表单时验证功能仍然有效。不过我更喜欢ajax。谢谢编辑：正如下面的一个答案所说，他们认为使用html会有所帮助，所以这里是页面。代码和内容的最后一点。我知道它又脏又乱，但我正在学习，很快就会把它清理干净。不管怎样，这里是：

上面是我用来验证一些表单信息然后将其输入数据库的脚本。我遇到的问题是，当连接到span的click事件处理程序时，validate函数似乎没有做任何事情。我还注意到onfocusout的行为似乎也不正常。任何关于我做错了什么的建议或想法。我知道我正确地包含了插件，因为在我提交表单时验证功能仍然有效。不过我更喜欢ajax。谢谢

编辑：正如下面的一个答案所说，他们认为使用html会有所帮助，所以这里是页面。代码和内容的最后一点。我知道它又脏又乱，但我正在学习，很快就会把它清理干净。不管怎样，这里是：

$("#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");
    }
    }
);


锦标赛设计师
锦标赛设计师







创建锦标赛

在此处输入有关锦标赛名称、地点、日期等的详细信息。
（*表示必填字段）
锦标赛名称：*

地区:
普罗沃
SLC
*

地区：
美国西部
*

地点：*

日期：*

时间：*

徽标：*添加删除

在这里设置定价结构。您可以添加任意数量的结构。要删除结构，请在下面的文本框中选择它，包括逗号，然后将其删除
#部门数量：价格：添加

定价结构：



在这里添加促销代码。有效的促销代码将包含介于A-Z和0-9之间的任何字符。创建促销代码时，可以将其设置为按百分比或固定美元金额进行折扣。默认情况下选择百分比。要删除促销代码，请执行与上面相同的步骤
促销代码：

代码：折扣（百分比[%]或美元[$）：添加



技能和重量划分
在此处输入顶级分区：+
垫子设计
用4个垫子添加垫子区域。添加

我在这里！
$（“#tournamentDesignTabs”）.tabs（）；
//$（“#锦标赛设计”）.validate（）；
$（“#创建锦标赛”）。单击（函数（）{
如果（$（“#tournamentDesign”）.validate（））{
美元邮政(
“createTournament.php”，
{tournamentName:$（“#tournamentName”）.val（），地区：$（“#地区”）.val（），地区：$（“#地区”）.val（），地点：$（“#地点”）.val（），日期：$（#日期”）.val（），时间：$（#时间”）.val（），徽标：$（#徽标”）.val（），
函数（responseText）{
$（“#结果”）.html（responseText）；
},  
“html”）
}否则{
警惕（“哦不”）；
}
}
);

是初始化

表单上的验证插件的工具
根据您的表单当前是否有效，返回true
或false

所以在if
语句中使用.valid（）
，而不是.validate（）
，来测试表单是否有效
<!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>

有关更多信息，请参阅。
是初始化表单上的验证插件的方法
根据您的表单当前是否有效，返回true
或false

所以在if
语句中使用.valid（）
，而不是.validate（）
，来测试表单是否有效
<!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>

有关更多信息，请参阅。
您似乎缺少验证规则。我依赖插件附带的默认规则。正如我所说，所有这些代码就绪后，提交按钮将调用验证，但我的伪按钮（称为tournamentDesign的span）不会将其称为编辑：我应该澄清，它必须调用验证，因为它返回为true，并继续通过代码调用ajax并将数据插入数据库。但是它实际上并没有验证。您似乎缺少验证规则。我依赖于插件附带的默认规则。正如我所说，所有这些代码就绪后，提交按钮将调用验证，但我的伪按钮（称为tournamentDesign的span）不会将其称为编辑：我应该澄清，它必须调用验证，因为它返回为true，并继续通过代码调用ajax并将数据插入数据库。但这并不能证明你是个天才。非常感谢。我看到一个教程使用了validate而不是valid，我认为它会起作用。我真是太感谢你了，你真是个天才。非常感谢。我看到一个教程使用了validate而不是valid，我认为它会起作用。我对你感激不尽。