Fatal编程技术网
  • javascript/
  • Javascript Jquery验证插件在Jquery ui自定义对话框中不工作

Javascript Jquery验证插件在Jquery ui自定义对话框中不工作

javascript jquery jquery-ui

Javascript Jquery验证插件在Jquery ui自定义对话框中不工作,javascript,jquery,jquery-ui,jquery-validate,jquery-ui-dialog,Javascript,Jquery,Jquery Ui,Jquery Validate,Jquery Ui Dialog,我正在使用此链接中提供的validate.js库来验证使用Jquery自定义对话框生成的弹出表单的文本字段 每当我点击submit按钮时，我总是收到错误“validate not defined”。我不明白我的代码有什么问题 我希望插件验证弹出表单中给出的所有字段 请帮忙 代码 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery U

我正在使用此链接中提供的validate.js库来验证使用Jquery自定义对话框生成的弹出表单的文本字段

每当我点击submit按钮时，我总是收到错误“validate not defined”。我不明白我的代码有什么问题

我希望插件验证弹出表单中给出的所有字段

请帮忙

代码

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"> </script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type= text/javascript>
$(function() {
$( "#dialog1" ).dialog({
  autoOpen: false,
  modal: true,
  resizable: false,
  width:800,
  height:800,
  show: {
    effect: "blind",
    duration: 1000
  },
  hide: {
    effect: "explode",
    duration: 1000
  }

});

$( "#opener" ).click(function() {
  $( "#dialog1" ).dialog( "open" );
});
});

$(document).ready(function(){
 $("#dialog").validate();
});

function isNumberKey(evt){  <!--Function to accept only numeric values-->
    //var e = evt || window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode
     if (charCode != 46 && charCode > 31 
&& (charCode < 48 || charCode > 57))
    return false;
    return true;
}   
    </script>
    <style>
     textarea { 
     vertical-align: top; 
      }
     </style>
     </head>
     <body>
     <div id="dia">
      <form name="dialog" method="get" action="">

     <div id="dialog1" title="Upload Details">
     <fieldset>
     <legend><p>Please fill in the follwing Item details to compalete the uploading process.</p></legend><br><br>

     Name: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="text" id="cIname"   name="Iname"size="30" placeholder="Item Name"/><br><br>

     <p><div id='ccontactform_category_errorloc' class='err'></div>

 <label for="ccategory"  style="margin-bottom: 90px;margin-top:50px">Category: </label>&nbsp;&nbsp;&nbsp;
     <select id="ccategory" name="category"class="input">
     <option value="0" selected="selected">
     [Choose Category]
     </option>
     <option value="Arts and entertainment">Arts and entertainment</option>
     <option value="Automotive">Automotive</option>
     <option value="Business">Business</option>
     <option value="Computers">Computers</option>
     <option value="Games">Games</option>
     <option value="Health">Health</option>
     <option value="Internet">Internet</option>
     <option value="News and Media">News and Media</option>
     <option value="Recreation">Recreation</option>
     <option value="Reference">Reference</option>
     <option value="Shopping">Shopping</option>
     <option value="Sports">Sports</option>
     <option value="World">World</option>
     </select>
     <div id="choose_own_text"></div>
     </p><br>

     Brand:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="cIbrand" name="Ibrand" size="30" placeholder="Item Brand"/><br><br>

     Price (Rs):&nbsp;&nbsp;  <input type="text" name="price" id="cprice"size="20" placeholder="Enter Price" maxlength="15" onkeypress="return isNumberKey(event)"/> .00 ps<br><br>

    <label for="cIdescrp"  style="margin-bottom: 90px;margin-top:50px">Description:</label>
   <textarea rows="15" cols="40" id="cIdescrp" name="Idescrp"style="resize: none;overflow:auto" onkeypress=""></textarea><br><br>

    Mobile No:&nbsp;&nbsp;  <input type="text" name="Num" id="cNum"size="20" placeholder="Enter Valid Number" maxlength="10" onkeypress="return isNumberKey(event)"/> <br><br>




   <button id="Submit" onclick="validate()">Submit Details</button>

   </fieldset>
    </div>

    </form>
     <button id="opener">Open Dialog</button>

    </div>
   </body>
   </html>


jQueryUI对话框-动画
$（函数（）{
$（“#对话框1”）。对话框({
自动打开：错误，
莫代尔：是的，
可调整大小：false，
宽度：800，
身高：800，
展示：{
效果：“盲”，
持续时间：1000
},
隐藏：{
效果：“爆炸”，
持续时间：1000
}
});
$（“#开场白”）。单击（函数（）{
$（“对话1”）。对话（“打开”）；
});
});
$（文档）.ready（函数（）{
$（“#对话框”）.validate（）；
});
函数isNumberKey（evt）{
//var e=evt | | window.event；
var charCode=（evt.which）？evt.which:evt.keyCode
如果（charCode！=46&&charCode>31
&&（字符编码<48 | |字符编码>57））
返回false；
返回true；
}   
text区域{
垂直对齐：顶部；
}
请填写以下项目详细信息以完成上载过程。



名称：



类别：
[选择类别]
艺术与娱乐
汽车
生意
计算机
游戏
健康
互联网
新闻和媒体
娱乐
参考文献
购物
体育
世界


品牌：


价格（卢比）：.00ps


说明：



手机号码：


提交详细信息
打开对话框
引用OP:

我不断收到错误“验证未定义”

听起来您没有正确包含验证插件脚本：

<script src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"> </script>
当然，jQuery选择器目标
$（“#dialog”）
是不正确的。散列“
#
”试图将不存在的
id
作为目标

将
id=“dialog”
添加到您的
表单
标签中

<form id="dialog" name="dialog" method="get" action="">
您的代码：

<button id="Submit" onclick="validate()">Submit Details</button>
有关如何声明规则，请参见下面的演示。在演示中，我使用了您的代码并将
required
应用于第一个字段。字段由
name
属性标识。要制作
选择列表
所需
，第一个
选项
项必须包含
值=“”

工作演示：





我强烈建议您彻底检查文档：


尝试了您建议的更改。正如您在问题中发布的代码中所看到的，我已经包括type=“text/javascript”。我需要将其添加到其他地方吗？？即使在进行了上述编辑，如更改js文件的url和，文本字段仍然没有得到验证。我没有收到错误，但也没有收到任何输出。请建议进一步的操作过程…如果所需的字段没有填充，我也没有添加任何自定义错误消息及其CSS属性。我需要添加它们吗，或者它们是由插件自动添加的？？@Lucy，很明显，
jquery
、
jqueryui
或
jqueryvalidate
的
标记中没有
type=text/javascript
。查看我编辑的答案。我添加了type=”“text/javascript“在我的代码中，然后我尝试使用与第一个字段相同的技术验证其他输入字段，但它没有如此链接中所示工作。我有另一个查询，你的fiddle代码会在我粘贴在问题中的代码中显示的弹出式表单中工作吗？因为我正试图通过使用jquery ui将代码嵌入jquery来在弹出式表单中实现这一点。我在代码中使用ur技术，但无法获得任何输出。知道为什么吗？？

$('[name="dialog"]').validate();



<button id="Submit" onclick="validate()">Submit Details</button>



<button id="Submit">Submit Details</button>