$("#tournamentDesignTabs").tabs();$("#tournamentDesign").validate();$("#createTournament").click(function(){ if($("#tournamentDesign").validate()){ $.post( "createTournament.php", {tournamentName: $("#tournamentName").val(), district: $("#d
$("#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");
}
}
);
所以上面是我用来验证某些表单信息然后将其输入数据库的脚本.我遇到的问题是,当附加到span的click事件处理程序时,validate函数似乎没有做任何事情.我也注意到onfocusout似乎也表现不正常.关于我做错了什么的任何建议或想法.我知道我已正确包含插件,因为验证功能在我提交表单时仍然有效.我更喜欢ajax.谢谢！
编辑：正如下面的一个答案,他们认为有html会有所帮助所以这里是页面.最后一点代码和内容.我知道它很脏而且很脏,但我正在学习并很快就会清理它.无论如何它是：
<!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://img.558idc.com/uploadfile/allimg/210615/1P0235026-3.jpg"></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()是初始化表单上的Validation插件.
.valid()返回true或false,具体取决于您的表单目前是否有效.
所以你在if语句中使用.valid()而不是.validate()来测试表单是否有效……
$("#tournamentDesign").validate();
$("#createTournament").click(function(){
if($("#tournamentDesign").valid()){
...
有关详细信息,请参阅docs.jquery.com/Plugins/Validation/valid.