jQuery Validation插件在单击事件处理程序中时将无法验证 [英] jQuery Validation plugin won't validate when in click event handler of
问题描述
$("#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");
}
}
);
所以上面是我用来验证一些表单信息，然后将其输入数据库的脚本.我遇到的问题是，当附加到跨度的click事件处理程序时，validate函数似乎没有执行任何操作.我还注意到onfocusout似乎也不正常.关于我在做什么错的任何建议或想法.我知道我已正确插入了插件，因为当我提交表单时，validate函数仍然有效.不过，我更喜欢ajax.谢谢！
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!
正如下面的一个回答所述，他们认为使用html会有所帮助，所以这里是页面.最后的代码和内容.我知道它肮脏且凌乱，但是我正在学习，并将尽快对其进行清理.无论如何，这里是:
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>
推荐答案
.validate() 是初始化form上的验证插件.
.valid() 返回true或false取决于您的表单目前有效.
.valid() returns true or false depending on if your form is presently valid.
因此，您将在if语句中使用.valid()而不是.validate()来测试表单是否有效...
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()){
...
有关更多信息，请参见 docs.jquery.com/Plugins/Validation/valid .
See docs.jquery.com/Plugins/Validation/valid for more info.
这篇关于jQuery Validation插件在单击事件处理程序中时将无法验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
